Question

我的dom的一部分将在页面加载（由ajax）之后创建。对于那些生成的dom-after-page-load，我的代码不起作用（没有任何反应）。这是我的代码：

var doc = $(document);
var hold_trigger = $('.qandacontent, tr[id^="comment-"], div[class] > p:not([class])');

hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle.bind(this), hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

经过一些研究后，这是我的新代码：

var doc = $(document);
var hold_trigger = $('.qandacontent, tr[id^="comment-"], div[class] > p:not([class])');

doc.on("mousedown", hold_trigger, function() {
    timeout_id = setTimeout(menu_toggle.bind(this), hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

但它抛出了这个：

未捕获的TypeError：无法读取未定义的属性'replace' 在HTMLDocument.menu_toggle

我知道如何解决它？

这是menu_toggle函数：

function menu_toggle() {
    var curr_url = window.location.href.replace(/#.*$/, "");
    if ( $(this).is("tr") ){
        url_of_elem = curr_url + "#" + $(this).attr("id");
        $(".elm_url > h3").html($(".elm_url > h3").text().replace(/بخش|پست/,"پیام"));
    } else {
        url_of_elem = curr_url + "#" + $(this).siblings("table[id]").attr("id").replace("table","post");
        $(".elm_url > h3").html($(".elm_url > h3").text().replace(/بخش|پیام/,"پست"));
    }  

    document.getElementById("elm_url_input").value = decodeURI(url_of_elem);
    hold_menu.fadeIn(100);
    document.getElementById("elm_url_input").select();
}

Answer 1

这可能不是你的整个问题，但这肯定是一个问题。

var doc = $(document);
var hold_trigger = $('.qandacontent, tr[id^="comment-"], div[class] > p:not([class])');

doc.on("mousedown", hold_trigger, function() {
    timeout_id = setTimeout(menu_toggle.bind(this), hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

http://learn.jquery.com/events/event-delegation/

注意这一部分：doc.on("mousedown", hold_trigger, function() {
您正在尝试将jQuery对象作为on()的第二个参数。这对委托绑定无效。它需要一个包含选择器的字符串，其目的是将该选择器应用于每个冒泡到父级的事件，以查看它是否与事件源自的元素匹配。如果匹配，它将针对该元素处理事件。

这应该改变，所以你只需给它选择器。

var doc = $(document);

doc.on("mousedown", '.qandacontent, tr[id^="comment-"], div[class] > p:not([class])', function() {
    timeout_id = setTimeout(menu_toggle.bind(this), hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

Answer 2

on()函数中的第二个参数应该是一个选择器，而不是一个jquery对象。所以它有效：

var doc = $(document);

doc.on('mousedown', '.qandacontent, tr[id^="comment-"], div[class] > p:not([class])', function() {
    timeout_id = setTimeout(menu_toggle.bind(this), hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

如何在dom加载后使jquery元素处理生成的元素？

2 个答案: