0

ここに私のHTMLコードがあります:

<div id="playlist_item">
    <ul class="link" id="link">
        <div class="style"><input type="checkbox" class="styled">
            <div id="style"></div>   
        </div>
        <li class="edit">http://carouselinfo.com/canal/</li>
        <span class="main edit">123</span>
    </ul>
</div>

先頭に ul 要素を追加すると、この要素の他の jquery イベントが機能しません

Jクエリコード:

$(function() {    
    $(".new").click(function(){
    $("#playlist_item").prepend("<ul class='link' id='link'><div class='style'><input type='checkbox' class='styled'><div id='style'></div></div><li class='edit'>Please edit this file</li><span class='main edit'>Write Duration</span></ul>")
});

このコードは prepend 要素に対しては機能しません

$('.edit').editable();

$('input:checkbox').click(function () {
    var check_all = $("input[type='checkbox']");
    if ($(this).closest("ul").hasClass("change_link")) {
        $(this).closest("ul").removeClass("change_link");
    } else {
        $(this).closest("ul").addClass("change_link");
        $(".option").html("<div id='icons'><div class='add'></div></div><div id='icons'><div class='delete'></div></div>");
    }

    if (check_all.length == $("input[type='checkbox']").not(":checked").length) {
        $(".option").html("");
    }
});

どこが間違っていますか？私を助けてください..

4

1 に答える 1

3

$('input:checkbox').click(function() {次のコードに置き換えます。

$('#playlist_item').on('click', 'input:checkbox', function() {

イベントを$('input:checkbox')それにバインドすると、バインドを実行した時点で存在する一致する要素にのみバインドされます。デリゲート構文を使用して、イベントを親要素にバインドし、関数の呼び出し時に子要素が存在していなかったとしても、すべての子要素からイベントを受け取り.on()ます。

新しい要素も呼び出す必要が.editable()あるため、新しい要素を追加した後、次の操作を行います。

$('.edit:not(.editable-done)').addClass('editable-done').editable();

これにより.editable()、要素ごとに 1 回だけ呼び出されるようになります。jQuery UI ウィジェットの場合はそのままにしておくことができ$('.edit').editable()ます - ウィジェットが既に作成されているかどうかを自動的に検出します。

于 2012-05-18T13:36:57.563 に答える