javascript - Jquery: Toggle not working -
i have html page structure this:
<div class="editable>content <span class="multiple-users">span-content</span> <span class="multiple-users">span-content2</span> <span class="multiple-users">span-content3</span> </span>
when click on span element class "multiple-users", want replace in div of class "editable" content of clicked span. , when click on content of clicked span, want revert original form, replacing in div.
here have:
$(document).ready(function () { $('span.multiple-users').click(function () { var id = $(this).text().match(/[0-9]+/); var old_html = $(this).closest('div.editable').html(); var instructor_obj = $(this).closest('div.editable'); instructor_obj.html("<span id=" + id + " >instructor id: " + id + "</span>"); $('#' + id).click(function () { $(this).closest('div.editable').html(old_html); }); }); });
but doesn't want do. when click on span of class="multiple-users," replaces in div span-content, , when click on span-content, reverts original contents. however, when try click on span again, doesn't replace in div content of span clicked on.
in short, doesn't toggle properly. can see what's wrong code?
you need delegate event, dynamically creating new elements. when click span element events bound old elements destroyed not new ones.
$('.editable').on('click', 'span.multiple-users', function () {
Comments
Post a Comment