-1

所以我加载这个：

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

从这个控制器

    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);
    }

渲染这个视图

  @foreach (var item in Model)
  {

    <tr>

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

    </tr>

   }

类别显示但此功能

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

或任何其他 jquery 函数无法识别$('#categories tr). 但是它会识别$('#categories')。我通过删除load()和硬编码来测试

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

它有效。这是怎么回事？

编辑：完整的 Index.cshtml 视图

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



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

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

 </div>
4

2 回答 2

1

您使用的on方法有点不同。而不是选择器$('#categories tr')，你应该使用

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

原因是，该on方法与选择器中的任何内容挂钩，然后捕获click事件。因为，当您运行此代码时，没有trin #categories，该on方法永远不会被挂钩。但是，如果您使用我所说的方法，on它将迷上#categories并适用于click所有tr#categories

于 2013-08-17T04:56:35.733 回答
1

您要么需要使用事件委托，要么使用 jQuery 的回调.load()。

jQuery.load()回调方法：

等待连接 click 事件，直到 HTML 在 DOM 中，这就是为什么当你通过.html()它工作的函数硬编码 HTML 时，因为on("click"可以找到要绑定的元素。而是这样做：

$('#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);
        });
    });
});

事件委托方式：

这允许您将事件绑定到已存在或将来可能存在的内容，如下所示：

$('#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);
    });
});
于 2013-08-17T04:56:43.910 回答