2

HTMLページに[追加と削除]ボタンをコーディングして、ページ内の画像コードを削除または追加しようとしています。DELETEボタンは、ボタンの前の最初の画像を削除します。[追加]ボタンを押すと、新しい画像がHTMLページに挿入され、[削除]ボタンが画像に挿入されます。

コードは正常に機能します。[削除]ボタンをクリックすると画像が削除され、[追加]ボタンをクリックすると画像が挿入されます。問題は、[追加]ボタンをクリックした後に挿入された削除ボタンが機能しないことです。したがって、[追加]ボタンをクリックしてから[削除]ボタンをクリックしても、画像は非表示になりません。クリックイベントは発生していません。

コードは次のとおりです。

<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>  
    <script type="text/javascript">

        $(document).ready(function(){
            $('.img-post input').after('<button type="button" >Delete</button>');

            $(".img-post button").click(function() {
                    $(this).prev().prev().remove();
                    $(this).prev().remove();
                    $(this).remove();
            });

            $(".add-img button").click(function() {
                    $('<img  src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
            });

        });


        </script>   
    </head>
    <body>
            <div class="img-post">
                <img  src="image1.jpg" /><input type="hidden" name="allimages[]" value="image1.jpg" /><br />
                <img  src="image2.jpg" /><input type="hidden" name="allimages[]" value="image2.jpg" /><br />
            </div>

            <div class="add-img">
                <button type="button" >Add image</button>
            </div>

    </body>
</html>
4

4 に答える 4

9

live()の代わりにを使用して、イベントハンドラーをボタンのクリックイベントにバインドしますclick()。

$(".img-post button").live('click', function() {
    $(this).prev().prev().remove();
    $(this).prev().remove();
    $(this).remove();
});

これにより、最初のDOMロード後に追加されたセレクターに一致するすべてのボタンも同じ関数を起動するようになります。

http://api.jquery.com/live/

于 2011-10-06T02:52:42.000 に答える
3

live代わりに使用してください：

$(".img-post button").live('click', function() { ...
于 2011-10-06T02:52:48.450 に答える
3

.click(fn)ハンドラーをに変更する必要があります.live("click", fn)。ハンドラー.click()は、document.ready時にページにある要素でのみ機能します。動的に追加する要素はその時点では存在しなかったため、クリックハンドラーはありません。

.live()一方、トップレベルのクリックを調べてから、一致するオブジェクトがクリックされているかどうかを調べ、初期化コードの実行後にページに動的に追加されたオブジェクトを処理します。 .live()一部のイベント（バブルするイベント）でのみ機能しますが、クリックは機能するイベントの1つです。

    $(document).ready(function(){
        $('.img-post input').after('<button type="button" >Delete</button>');

        $(".img-post button").live("click", function() {
                $(this).prev().prev().remove();
                $(this).prev().remove();
                $(this).remove();
        });

        $(".add-img button").live("click", function() {
                $('<img  src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
        });

    });
于 2011-10-06T02:52:53.243 に答える
3

jQuerylive関数を使用してみてください。これにより、ページが最初に読み込まれたときにDOMに存在していなくても、クリックハンドラーがセレクターに一致する要素にバインドされます（この例の場合）。

于 2011-10-06T02:54:16.127 に答える