內容加載AJAX後Jquery無法正常工作

Question

這個JQuery腳本在正常網頁打開時工作良好。

但是在AJAX的結果中，這個jquery函數不起作用。

<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結果中可行？

這是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」）。點擊（函數（）{

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

我猜你是改變每個.box項目當頁面負載，並且需要在阿賈克斯的結果再次修改。

如果這時，你可以把它作爲一個函數，並調用它在你的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(); 
}