добавление события onclick на замену с помощью jquery

Question

У меня возникла проблема с помещением события onclick на replaceWith на jquery. Моя функция во втором событии onclick не работает. Это мой пример кода.

sample.html

<div id = "first_div" onClick = "replace()">First</div> 

my.js

function replace() { 
    $('#first_div').replaceWith("<div id = 'sec_div' onclick='flyout('fb')'>Second</div>"); 
} 

Когда я нажимаю first_div это работает. Он показывает 2nd_div, но когда я нажимаю на второй div, он ничего не делает.

function flyout(data){ 
    if (data == "fb") $('#sec_div').replaceWith("<div>Last</div>"); 
} 

Answer 1

Причина, по которой ваш код не работает, заключается в том, что вы не передаете функцию «onclick» элемента #sec_div. У вас это определено как onclick="flyout('fb');", но функция вылета ничего не возвращает. Я изменил код ниже, так что flyout возвращает функцию и инкапсулирует значение data в ее закрытие, если вы хотите использовать эту же функцию с разными значениями для параметра data.

Кроме того, у меня есть решение, которое помогает отделить ваш HTML от вашего Javascript. Используя jquery, вы можете это сделать, используя метод delegate для привязки функции к любому событию.

HTML:

<div id="first_div">First</div> 

JS:

$("body").delegate('#first_div', 'click', replace); 
$("body").delegate('#sec_div', 'click', flyout("fb")); 

// change replace to: 
function replace() { 
    $(this).replaceWith("<div id='sec_div'>Second</div>"); 
} 
// change flyout to: 
function flyout(data){ 
    return (function(){ 
     if (data == "fb") { 
      $(this).replaceWith("<div>Last</div>"); 
     } 
    }); 
} 

EDIT: Согласно последнему использованию JQuery документации методы live является устаревшей, используйте вместо delegate.

Answer 2

Не существует события click, связанного с новым div.

Либо добавьте нового слушателя после вызова replaceWith(), либо используйте live() для прослушивания на уровне документа.

Answer 3

Вы не выбрали его надлежащим образом при замене функции.

onclick='flyout('fb')' 

часть имеет три четыре одинарные кавычки. вторая цитата закрывает первую цитату, а третья цитата запускает новую строку. Попробуйте избежать его следующим образом

element="<div id = 'sec_div' onclick='flyout(\"fb\")'>Second</div>" 
$('#first_div').replaceWith(element); 

проверка Также http://jsfiddle.net/5Stuh/