jquery .on(), grabbing new ajax content NOT associated with event

Question

To simplify from my actual code, lets say I have this:

<!-- Dynamic ajax content created after DOM load -->
<div id="dynamicUnknownIdName">lots of content <img src='image.jpg'>
</div>

<div id="edit_dynamicUnknownIdName" class="edit">Click Me</div>

Then, I set up my listener:

$(document).on('click', '.edit', function () {
    var pieces = this.id.split('_');
    var action = pieces[0];
    var id = pieces[1];

    if (action === 'edit') {
        var content = $('#' + id).html();
    }
});

My problem deals with getting the content of the ajax generated div. Every question I seem to find when I google for this is how to fire the click event on the action button, which you can see is not the problem. The DOM is not recognizing the div whose html I want, and the unrecognized div is unassociated with the binding action event.

Given this scenario, how would I make this work? Thanks!

You can do a check to see if the element exists `$('#' + id).length` — Milan Chheda, Aug 02 '17 at 14:20
As long as the element with the id exists when you click the edit button, this should work. — freedomn-m, Aug 02 '17 at 14:24
Seems to work fine for me: https://jsfiddle.net/teddyrised/3m9Lu7fe/. Check your browser console, does it display any error messages? Are you sure that your IDs are correct and **unique**? People often run into issues because their IDs are not unique--remember that browser behavior when it comes to duplicated IDs is undefined. — Terry, Aug 02 '17 at 14:24
@DaveGoten Uhhhhh, even if the link is dynamically added, listening to event bubbling on the document object is already enough. — Terry, Aug 02 '17 at 14:29
@DaveGoten The shown script works as expected: https://jsfiddle.net/tm4xd8j0/ — Andreas, Aug 02 '17 at 14:33
@Terry I could be wrong then, nice to know! It always gave me a lot of trouble in the past. @Andreas you know that jsfiddle automatically wraped your script in a `window.onload=function(){ /*your code here*/ }` which is what I was asking if @Pete_1 did in the 2nd half of my question, right? — Dave Goten, Aug 02 '17 at 14:41
@DaveGoten The behavior won't change if you place the code in the ``: https://jsfiddle.net/o3dLqyd8/ — Andreas, Aug 02 '17 at 15:06
On top of my head the only situation where your might create problem is when DOM have multiple divs with same id such as "dynamicUnknownIdName", rest all cases it should work. — amit wadhwani, Aug 02 '17 at 15:09
@Andreas yes that's fair I'll retract the questions I've had then since it seems unhelpful to this question — Dave Goten, Aug 02 '17 at 15:10

score 0 · Answer 1 · answered Aug 02 '17 at 15:20

Sorry guys, all of your comments finally made it click to look at something else. I didn't realize there were rules with id names.

jquery IDs with spaces

My id's looked like

comment_15b8aaa6-4549-11e7-8080-8001100c6ed8_4:2017-08-02 13:18:38

I should have provided this, my apologies.

jquery .on(), grabbing new ajax content NOT associated with event

1 Answers1