コンテンツがAJAXでロードされた後にJqueryが機能しない

Question

このJQueryスクリプトは、通常Webページを開いても正常に動作します。

しかし、AJAXの結果では、このjquery関数は機能しません。同様AJAX結果にこのス​​クリプトを実行可能にする方法

<script> 
$(".box").each(function(){ 
    var value = parseInt($(this).data("value")); 
if (value == 1) 
    var color = "red"; 
else if (value == 2 || value == 3) 
    var color = "yellow"; 
else 
    var color = "green"; 
for (var i = 0; i < value; i++) 
$(this).after("<div class='newBox' style='background:"+color+"'></div>"); 
}); 
</script> 

？

これはAJAXのjQueryです：

jQuery(document).ready(function($) { 
$('#test .br').click(function() { 
var choices = {}; 
console.log(choices); 
$.ajax({ 
    url: ajaxobject.ajaxurl, 
    type: 'POST', 
    data: { 
     'action': 'call_post', 
     'choices': choices, 
    }, 
    success: function(result) { 
     $('.filter-output').append(result); 
    } 
}); 
}) 
}); 

ここServer Link

Answer 1

コメント$(".box").each(function(){ });に記載されているとおり、ページは読み込み専用です。それで、それはajaxの成功後に実行されません。それでは、ajaxの成功の後にもう一度それを実行する必要がありますか、それを関数として作成し、Ajaxの成功のたびに呼び出すことができます。この

 <script> 

    jQuery(document).ready(function($) { 

    function color() 
    { 
     $(".box").each(function(){ 
      var value = parseInt($(this).data("value")); 
     if (value == 1) 
      var color = "red"; 
     else if (value == 2 || value == 3) 
      var color = "yellow"; 
     else 
      var color = "green"; 
     for (var i = 0; i < value; i++) 
     $(this).after("<div class='newBox' style='background:"+color+"'></div>"); 
     }); 
    } 

    color(); //called on page load 


    //ajax 


     $('#test .br').click(function() { 
       var choices = {}; 
       console.log(choices); 
       $.ajax({ 
        url: ajaxobject.ajaxurl, 
        type: 'POST', 
        data: { 
         'action': 'call_post', 
         'choices': choices, 
        }, 
        success: function(result) { 
         $('.filter-output').append(result); 
         color(); //call the function again here 
         ^^^^^^^ 
        } 
       }); 
     }); 
    }); 
    </script> 

Answer 2

を確認してください。この

変更してみてください - >クリック上にクリックしてください。 $（「＃テスト.BR」）。私は、ページがロードされたときに、各.boxの項目を変更していると思う、とAjaxが結果を持っていたときに再び変更する必要があります（関数（）{

jQuery(document).ready(function($) { 
$(document).on('click', '#test .br', function() { 
var choices = {}; 
console.log(choices); 
$.ajax({ 
    url: ajaxobject.ajaxurl, 
    type: 'POST', 
    data: { 
     'action': 'call_post', 
     'choices': choices, 
    }, 
    success: function(result) { 
     $('.filter-output').append(result); 
    } 
}); 
}) 
}); 

Answer 3

をクリックします。

続いた場合、あなたは関数としてそれを作ると、あなたのAJAXのsuccess一部にし、あなたの$(document).readyでそれを呼び出すことができます

function alterBox(){ 
     $(".box").each(function(){ 
     var value = parseInt($(this).data("value")); 
     if (value == 1) 
      var color = "red"; 
     else if (value == 2 || value == 3) 
      var color = "yellow"; 
     else 
      var color = "green"; 

     for (var i = 0; i < value; i++) 
      $(this).after("<div class='newBox' style='background:"+color+"'></div>"); 
    }); 
} 

成功あなたのAjaxコードで一部：。

success: function(result) { 
    $('.filter-output').append(result); 
    alterBox(); 
}