jqueryjqueryhtml

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

просмотры: 46K

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

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

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

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

Источник

Ответов (4)

Решение

Что о :

$("#myID").click(
  function () {
     var someText = "my dynamic text";
     var newDiv = $("<div>").append(someText).click(function () { alert("click!"); });
     $(this).append(newDiv);
  }
)
Источник

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

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

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

Источник

ВАЖНЫЙ:

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

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

ОЧЕНЬ ВАЖНО:

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

Источник

Начиная с 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

Источник