load function loads page but can't do anything with the data

Question

So I load this:

 $('#categories').load("/Category/GetCats");

from this controller

    public ActionResult GetCats()
    {
        var model = db.Cats
            .Where(c => c.user_id == 5);

        //var query = from c in db.Cats where c.user_id == 4 orderby c.catId select c;
        //var i = query.Count();
        //var results = query;

        return PartialView("_PartialGetCats", model);
    }

to render this view

  @foreach (var item in Model)
  {

    <tr>

        <td data-id="@item.catId">@item.item_name</td>

    </tr>

   }

The categories show but this function

     $('#categories tr').on("click", function () {
                var requestpage = "/Item/Partial?id=" + $(this).data("id");
                alert(requestpage);
                $.get(requestpage, function (result) {
                    $("#results").html(result);
                });

or any other jquery functions do not recognize the $('#categories tr). It will however recognize $('#categories'). I tested by removing the load() and hardocding this

   $('#categories').html('<tr data-id="5"><td>new data</td></tr>');

and it works. Whats going on?

EDIT: full Index.cshtml view

   @{
ViewBag.Title = "Home Page";
}



 <div id="categories">
 </div>

 <div id="results">
 </div>
 <div id="descrip">

 </div>

You should use event delegation. Change it to `$('#categories').on("click", "tr", function () {` — Ram, Aug 17 '13 at 04:46
possible duplicate of [jQuery - Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements) — Ram, Aug 17 '13 at 04:53

score 1 · Answer 1 · answered Aug 17 '13 at 04:56

1

You are using the on method a bit differently. Instead of the selector $('#categories tr'), you should use

$('#categories').on("click", "tr", function () { });

The reasons is, the on method gets hooked on whatever is in the selector and then captures the click event. Since, when you run this code, there is no tr in #categories, the on method never gets hooked. But if you use the method I stated, the on will get hooked on #categories and would work for every click on any tr in #categories

answered Aug 17 '13 at 04:56

U.P

7,357
7
39
61

with both ways I'm getting an `undefined` for the id – rogerthat Aug 17 '13 at 05:04
@PKKG I did. BUt at least its recognizing the `` now – rogerthat Aug 17 '13 at 05:09

score 1 · Accepted Answer · answered Aug 17 '13 at 04:56

You either need to use event delegation or use the callback for jQuery .load().

jQuery .load() callback method:

Wait to wire up the click event until the HTML is in the DOM, this is why when you hardcode the HTML in via the .html() function it works, because the on("click" can find the elements to bind to. Instead do this:

$('#categories').load("/Category/GetCats", function () {
    $('#categories tr').on("click", function () {
        var requestpage = "/Item/Partial?id=" + $(this).data("id");
        alert(requestpage);
        $.get(requestpage, function (result) {
            $("#results").html(result);
        });
    });
});

Event delegation method:

This allows you to bind events to content that exists or may exist in the future, like this:

$('#categories').load("/Category/GetCats");

$("#categories").on("click", "tr", function(){
    var requestpage = "/Item/Partial?id=" + $(this).data("id");
    alert(requestpage);
    $.get(requestpage, function (result) {
        $("#results").html(result);
    });
});

Sounds like you need to post a new question about your model. If you feel this answer helped your original question about the jQuery `.load()` function, then feel free to up-vote and/or accept the answer. — Karl Anderson, Aug 17 '13 at 05:10
Thanks now that its recognizing rows I'm sure I can figure it out — rogerthat, Aug 17 '13 at 05:11

load function loads page but can't do anything with the data

2 Answers2