добавление события onclick при замене на jquery - PullRequest
Новая
       34

добавление события onclick при замене на jquery

0 голосов
/ 20 февраля 2012

У меня проблема с помещением события 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, но когда я нажимаю 2nd div, он ничего не делает. 

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

Ответы [ 3 ]

1 голос
/ 20 февраля 2012

Причина, по которой ваш код не работает, заключается в том, что вы не передаете функцию в '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.

1 голос
/ 20 февраля 2012

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

onclick='flyout('fb')'

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

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

Также оформить заказ http://jsfiddle.net/5Stuh/

1 голос
/ 20 февраля 2012

Нет события щелчка, связанного с новым div.

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

...