CODEWITHSUNDEEP
javascriptjqueryhtmldom
Martin AJ
Martin AJ

Reputation: 6707

How can I make jquery elements working of generated elements after dom loaded?

Part of my dom will be created after page loaded (by ajax). For those generated-dom-after-page-load, my code doesn't work (nothing happens). Here is my code:

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

And here is my new code after some researches:

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

But it throws this:

Uncaught TypeError: Cannot read property 'replace' of undefined at HTMLDocument.menu_toggle

Any idea how can I fix it?

And here is menu_toggle function:

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

Upvotes: 0

Views: 49

Answers (2)

Martin AJ
Martin AJ

Reputation: 6707

The second argument in on() function should be a selector, not a jquery object. So it works:

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

Upvotes: 0

Taplar
Taplar

Reputation: 24965

This may not be your whole issue, but this is definitely an issue.

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/

Notice this part: doc.on("mousedown", hold_trigger, function() {
You are trying to give a jQuery object as the second parameter to the on(). This is not valid for a delegate binding. It expects a string containing a selector, the purpose of which being that selector will be applied against every event that bubbles up to the parent to see if it matches the element the event originated from. If it matches, it will process the event against that element.

This should be changed so you just give it the selector.

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

Upvotes: 1

Related Questions