1

I have a list of news from a database.

When I start the page all the news titles appear in a list and when I click on them the content of that specific news will show up in a div below.

I'm getting the initial news list like this (this is php code from the index.php file that runs on startup)

$sql = "SELECT title FROM `news`";
$result = mysqli_query($GLOBALS['conn'], $sql);


if (mysqli_num_rows($result) > 0) {
        echo "<div id = 'list'>";
        echo "<p id = 'text'> All News:  </p>";
        echo "<ul id ='news_list'>";
        while($row = mysqli_fetch_assoc($result)) {
            echo "<li><a href='#'>" . $row["title"] . "</a></li>";
        }
        echo "</ul> </div>";
}

}

And in my script.js I have a function that will show a specific news content when I click on one

$( "#news_list li" ).click(function() {
        //do something

});

This works, however I want to sort those news based off a category and view only those specific news instead (instead of all of them).

So my script.js function would look something like

$( ".category" ).click(function() {
        var hash = $(this).text(); //name of the news
        $("#news_list").empty();   // ul of news list
        $.post("get_news_by_category.php",{ajax: true, hash:hash},function(data, status){
                        var news = "";
                        for (var i = 0; i < data.length; i++) {
                            if (data.charAt(i) != "$"){
                                news = news + data.charAt(i);
                            }
                            else{
                                $( "#news_list" ).append("<li><a href='#'>" + news +  "</a></li>");
                                news = "";
                            }
                        }
        });


        $("#text").text('News by ' + hash);

And my get_news_by_category.php looks something like this

$sql = "SELECT title FROM news WHERE category = '" . $_POST['hash'] . "'";
        $result = mysqli_query($GLOBALS['conn'], $sql);
        if (mysqli_num_rows($result) > 0) {
            while($row = mysqli_fetch_assoc($result)) {
                echo $row["title"]; echo "$";
            }
        }

I get the new list with the desired news, but I no longer can click on them. I can only click the news from the initial list, however if I try to click on a news from the list after I filter it, that won't work and I have no idea why.

Hope I've made myself clear.

I would love some input on what I'm doing wrong

EDIT:

I can't thank CBroe and Just a Student enough for the fast response. The solution was using

$('#list').on('click', 'li', function() instead of my old click function and that actually worked.

  • Can you please add some working model . a fiddle demo – ankit verma May 22 '17 at 10:45
  • _“however if I try to click on a news from the list after I filter it, that won't work and I have no idea why”_ – because those elements simply did not exist at the time when you selected the elements to bind event handlers to. Go read up on _event delegation_. – CBroe May 22 '17 at 10:47
  • In short, when you append elements to the page dynamically, they won't have a click handler. `$('selector').click(/* ... */)` will select elements that are on the page *at that point in time* and attach event handlers. See the question we linked to for an explanation of how to handle dynamically added elements :-) – Just a student May 22 '17 at 10:47
  • Is your js placed after the html codes? – Vishnu May 22 '17 at 10:48
  • I'm using `` and a `script.js` file separately, if that's what you're asking –  May 22 '17 at 10:49
  • No, We need to let jquery know the selector. For this, We need to load Jquery after the whole DOM. Make sense? – Vishnu May 22 '17 at 10:52

0 Answers0