jquery - jQuery.clickが起動しない

Question

リンク（imp）があります。このリンクをクリックすると、divが表示されます。このdivには、このdivを減らすためのマイナス記号があります。このdivを減らすと、プラス記号を追加してこのdivを再び表示します。

問題はプラス記号だけです。

$('.plusStep1').click(function() {
  $('#plus').empty();
  $('#step1').css('display','block');
  $(".close-step1 img")
    .attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");

上記のコードは、コンソールで実行した場合にのみ機能するようです。

これがフィドルのテストです。

score 1 · Accepted Answer

.click動的に作成された要素では機能しません。DOM がロードされた後に作成した要素に関数をバインドする場合は、次を使用するのが最適ですdelegate: http://api.jquery.com/delegate/

したがって、DOM の後に作成されたかどうかに関係なく、この関数をすべての要素にバインドするには、次のようなものを使用できます。

$("#myContainer").on("click", ".PlusStep1", function() {
  $(this).toggleClass("chosen");
});

すべてのPlusStep1クラス要素が id を持つ要素の子 (または子孫) である場所myContainer、つまり、それらがその中にある場合、深さは関係ありません。

score 0 · Accepted Answer

は.click()、新しく作成された要素にバインドされていません。（プラスクリックで）必要なことを実行し、アンカー呼び出しを作成するときに、別の関数を作成できます。

bind('click', function() {
   seperateFunction();
})

更新：申し訳ありませんが、もっと簡単にliveトリックを実行する必要があります（jQuery docを参照）

2回目の更新：別のstackoverflowの投稿を参照してください

score 0 · Accepted Answer

$('#plus').click(function() {プラス記号にはクラスがないがplusStep1IDがあるため、セレクターをに変更しますplus

更新されたフィドルを保存しました

score 0 · Accepted Answer

これを試して

jQuery(function( $ ){

        // Get a reference to the container.
        var containerStep1 = $( "#step1" );

        // Bind the link to toggle the slide.
        $( ".impaye" ).click(
        function( event ){
        // Prevent the default event.
        event.preventDefault();

        // Toggle the slide based on its current
        // visibility.
        if (containerStep1.is( ":visible" )){
        containerStep1.slideUp( 1000 );
        } else {
        containerStep1.slideDown( 1000 );
        }
        }
        );


        // CLOSE STEPS

        $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");
        // STEP 1
        $('.close-step1').click(function () {
            $('#plus').empty();
            $('.close-step1').clone().appendTo('#plus');
            $('#plus .close-step1').addClass('plusStep1');

            containerStep1.slideToggle("slow", function () {
                if ($("#step1").is(':visible')) {
                    $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");
                }
                else {
                    $(".close-step1 img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/3/30/OCR-A_char_Plus_Sign.svg");
                    $('.plusStep1').bind('click',plustep1);
                }

            });
        });
        function plustep1() {
            $('#plus').empty();
            $('#step1').css('display','block');
            $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");

        }


        });

score 0 · Accepted Answer

次のものも使用できます

 $('.plusStep1').live('click',function() {

//---------Your Code----------
})

or 
 $('.plusStep1').bind('click',function() {
//---------Your Code----------
})

score 0 · Accepted Answer

必要以上に難しくしていると思います。たぶん、この方法で試してみるとうまくいくでしょう。

html

<a href="#" class="trigger">img</a>

<div id="togglable" style="display:none;">
  <a href="#" class="trigger">Hide me</a>
  content content content
</div>

js

$(".trigger").click(function() {
  $("#togglable").toggle();
});

そして、ロジックを少し追加して、トリガー要素の src プロパティを変更し、+ および - 画像を組み込むことができます。

ライブバインディングが必要ないという利点があります。

jquery - jQuery.clickが起動しない

6 に答える 6

Related

Reference