JQuery 在局部视图中未检测到 id 元素

Question

我有一个 id 元素“Remove”（在局部视图中），点击它会从电影中删除 producerId。当我点击它时，jquery 函数没有响应，什么也没有发生。请帮我看看这里出了什么问题。

这是我的视图 html (_ProducerIndex.cshtml) -

@model MovieInfo.Models.Producer

@if (Model != null)
{
<table>

    <tr>
        <td>
            @Html.DisplayFor(model => model.Name)
        </td>
        <td>
            <div id="removeproducer" data-mi-producerId="@Model.ProducerId" data-mi-movieid="@ViewData["Movie"]">
                <a href="#">Remove</a>
            </div>
        </td>
    </tr>

</table>

}

这是我的 jquery 正在做的 -

$(function () {

var removeProducer = function () {

    var $a = $(this);
    var prodId = $a.attr("data-mi-producerid");
    var mov = $a.attr("data-mi-movieId");

    var options = {
        url: "/Movie/ProducerRemove",
        contentType: "application/json",
        data: JSON.stringify({ producerId: prodId, movie: mov }),
        type: "post",
        dataType: "html"
    };

    $.ajax(options).done(function (data) {
        var $target = $("#producerindex");
        $target.html(data);
    });

    return false;
};

$("#removeproducer").on("click", removeProducer);
});

我尝试在 removeProducer 函数中放置警报语句，但它没有被调用。

Answer 1

如果您的元素是通过 ajax 拉入的，这意味着您的 on'click' 事件可能在文档中存在实际元素之前被分配。你必须等到 ajax 完成后或者做类似的事情

$('body').on('click', '#removeproducer', removeProducer);

反而。

后一种方式将点击事件绑定到正文，但只有在点击#removeproducer 元素时才会反应，它会随时触发文档中找到的所有#removeproducer 元素。