Question

所以我加载它：

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

Answer 1

您使用on方法略有不同。您应该使用

而不是选择器$('#categories tr')

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

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

Answer 2

您需要使用事件委派或使用jQuery .load()的回调。

jQuery .load()回调方法：

等待点击事件接通，直到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);
    });
});

加载函数加载页面但不能对数据执行任何操作

2 个答案: