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

Question

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

The error occours on menu_toggle. Can you provide more code or a jsfiddle? The snippets are not enough to get a clear sight on the issue — broadcoder
– broadcoder, Commented Mar 27, 2018 at 20:38

Taplar · Accepted Answer · 2018-03-27 20:51:06Z

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

True, it works thank you. Just for my information, can't I make a selector of hold_trigger variable? (which is a jquery object)
You could make it an actual string variable, but no, you should not provide it as a jQuery object. The whole point of the delegate is to give the selector for matching against elements that potentially do not exist yet. Trying to select them ahead of time does not make sense.

Martin AJ · Accepted Answer · 2018-03-27 20:53:10Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related