jQuery HTML Generation That Generates Subsequent HTML

Question

I'm rather new to jQuery and JavaScript and I'm trying to develop a webpage that does something that probably isn't entirely reasonable, but from what I know of jQuery it seemed like a quick and easy design. The code is something like:

<script>
    $(document).ready(function() {

      $("button" ).click(function() {
          $("#target").html('<div><p>Some HTML</p><div id="clickHere"></div><div id="target2"></div></div>');
      });

      $("#clickHere").click(function(){
          $("#target2").html('<p>Replacement HTML</p>');

      });

    });
</script>

<div id="target"></div>

There are styling elements and the identifiers are different in the actual code, but the general functionality I'm going for is the user selects a content area. That content is then generated by the first click function call. Within that content is further stratification that I would like to allow the user to select from and then generate the final level of content. I'm guessing there is some underlying mechanism that won't allow for the "target2" click event to fire for the content dynamically generated from the "target" div. But if I'm just doing something wrong, I appreciate the help!

Can you take a moment and actually format your post to be somewhat readable? Also, while I appreciate the good thoughts, blessings and salutations are not necessary and have a tendency to distract readers from the content of the question. — David, Aug 27 '15 at 18:30
The browser's console is *probably* trying to tell you about syntax errors in your code. You try to invoke the jQuery function a couple of times without referencing the `$` object. — David, Aug 27 '15 at 18:32
You're not invoking jQuery: `$('button')`, `$('#clickHere')`... — War10ck, Aug 27 '15 at 18:36
I apologize for the sloppiness of my example. I double checked and in my actual code I do invoke jQuery on the comparable elements. I updated my example to reflect this. — ChristianKid044, Aug 27 '15 at 18:45

score 0 · Accepted Answer · edited May 23 '17 at 11:52

There are a couple of problems here...

First, you have syntax errors when you do something like this:

("button")

To invoke the jQuery function you need to reference the jQuery object:

$("button")

Second, when you do this in the document's ready handler:

$("#clickHere")

It's only going to find matching elements which exist at that time. Since there are none, no click handlers are bound to that element. Instead, you want to use event delegation with the .on() function to bind to an un-changing top-level element. Something like this:

$(document).on('click', '#clickHere', function(){
    // ...
});

I explain this a lot more here (and there are other great and more popular explanations here), but essentially what you need to do here is attach an event to a page element that exists at the time and won't change. (In this case document will do the job nicely. But any common parent element will do.) Since events "bubble up" through the DOM, it will still catch those clicks. But this way you don't have to re-attach handlers to elements that are going to be added later in the document's life. (Which is what you're doing with those div elements.)

Third, these are going to cause problems:

<div id="clickHere">

As soon as there's more than one element with the same id on the page, the HTML is by definition invalid and the behavior of any JavaScript is going to be undefined. It might work, or it might not.

Instead, in this case use classes:

<div class="clickHere">

And change your jQuery selectors accordingly:

$(document).on('click', '.clickHere', function(){
    // ...
});

(There may be more problems, but you'll need to at least correct these to get going.)

Ah, thank you. If I might ask, would it be terrible practice to redefine the button element after each level of the content is over-written? Does the DOM mantain each element when the HTML is replaced? — ChristianKid044, Aug 27 '15 at 18:51
@ChristianKid044: I'm not 100% sure what you mean, but if you remove any element from the DOM and replace it with another one, even an identical one, any handlers attached to the first one are now gone. Handlers get attached to elements, not to selectors. — David, Aug 27 '15 at 19:03

score 0 · Answer 2 · answered Aug 27 '15 at 18:48

Running click event dynamically with jQuery requires a on() function E.G.

$("*").on("click","#target2",function(){
.....do somthing.....
});

I think that's what you're looking for.

If there's anything you need in addition the script, feel free to ask.

jQuery HTML Generation That Generates Subsequent HTML

2 Answers2