Question

我有以下JQuery代码： -

 $('.rpItem').on("click", "img", function (e) {
    alert('here');
    var text = $(this).siblings('span.rpText').text();
    e.preventDefault();
    e.stopPropagation();

    var args = {
        reportName: text
    };
    $.ajax({
        type: "POST",
        url: "Dashboard.aspx/AddToFavourites",
        data: JSON.stringify(args),
        contentType: "application/json;charset=utf-8;",
        success: function (data) {
            __doPostBack('#MainMenuUP', text);
            //__doPostBack('<%= MainMenuUP.ClientID %>', text);
        },
        error: function () {
        }
    });
});


$("#reports_textSearch").keyup(function () {
    var textLength = $(this).val().length;
    delay(function () {

        if (textLength == 0) {
            emptySearchString();
        }

        if (textLength > 2) {
            var args = {
                reportName: document.getElementById('reports_textSearch').value
            };
            doSearchString(args);
        }
    }, 1000);

});

function doSearchString(args) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Dashboard.aspx/FetchReports",
        data: JSON.stringify(args),
        dataType: "json",
        success: function (data) {
            //__doPostBack('#MainMenuUP', data.d);
            __doPostBack('<%= MainMenuUP.ClientID %>', data.d);  
        },
        error: function (data) {
        }
    });
}

并且第一次工作正常。然而，在回发之后，doSearch继续正常工作，而

$('.rpItem').on("click", "img", function (e) {

失败。它甚至没有通过该代码。

我试图替换

__doPostBack('<%= MainMenuUP.ClientID %>', data.d);

与

__doPostBack('<%= MainMenuUP.UniqueID %>', data.d);

但这只是我不想要的页面刷新。

非常感谢任何帮助！

谢谢

Answer 1

将您的选择器更改为：

$('body').on("click", ".rpItem img", function (e) {
    // your code
});

Answer 2

如果在您的ajax呼叫期间更换了.rpItem，请阅读以下内容：

第一次执行js时，它会将on事件绑定到现有的rpItems。除非您重新执行完成绑定的脚本，否则任何新添加的.rpItem都将跳过此绑定。

为了避免这种情况，您可以将文档用于@Mojtaba建议的绑定，但请记住，您将绑定“添加”到文档，导致“检查”是否已单击.rpItem img 每次时间点击文档上的内容。

否则，您可以创建一个将.rpItem作为参数的函数，并显式完成绑定。将每个新的.rpItem添加到您的页面后，您可以调用此函数来绑定click事件。例如：

function foo(arg) {
  $(arg).on("click", "img", function (e) {
  ...
  }
}
$(document).ready(function(){
    $('.rpItem').each(function(){
       foo($(this));
    };

});

.on（“点击”，“img”，功能（e）在回发后无效

2 个答案: