Добавление HTML-события с помощью jQuery

Question

Я хочу добавить немного HTML в этот div, и в HTML также должно быть событие click.

    <div id="myID">
        <p>hello, world!</p>
    </div>

Я хочу вставить новый div внутри вышеупомянутого div, и я хочу событие click для нового HTML, который я вставил туда Внутри нового элемента div будет динамический текст, поэтому он должен создаваться динамически.

Как это можно сделать?

Answer 1

А как же:

$("#myID").click(
  function () {
     var someText = "my dynamic text";
     var newDiv = $("<div>").append(someText).click(function () { alert("click!"); });
     $(this).append(newDiv);
  }
)

Answer 2

Начиная с jQuery 1.3, это будет работать:

<div class="myClass">
<p>hello, world!</p>
</div>


$(".myClass").live("click", function(){
    $(this).after("<div class='myClass'><p>Another paragraph!</p></div>");
});

Подробнее о живых событиях на этой странице:

http://docs.jquery.com/Events

Answer 3

ВАЖНО:

Примите во внимание, что производительность должна быть лучше, если вы используете самый специфический селектор. В этом случае, если вы хотите влиять только на div внутри div "MyId", вы должны использовать:

$("#MyId").on("click", "div", function(e) {
    // Whatever you want to do when the divs inside #MyId div are clicked
});

ОЧЕНЬ ВАЖНО:

Примите во внимание, что второй параметр для метода on, в данном случае «div», является необязательным, но вам НЕОБХОДИМО предоставить его, если вы хотите, чтобы событие было автоматически присоединено к динамически созданным элементам. Это называется отложенным в документации jquery для метода on. Я надеюсь, что эта информация сэкономит время для тех, кто читает это в будущем:)

Answer 4

Андрей, решите эту проблему для меня! Но .live устарела в последних версиях jquery (по состоянию на 1.7). Используйте .on или .delegate в top.document, чтобы связать эти типы событий. См:

$(document).on(".myClass", "click", function(){
    $(this).after("<div class='myClass'>Another paragraph!</div>");
});

Поздравляю, мой друг!