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项目，并且当ajax有结果时需要再次修改。

如果是这样，您可以将其设为一个函数，并在您的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();
}

Answer 2

正如我在评论中提到的$(".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 3

试试这个

更改 - ＆gt;点击进入点击。 $（＆＃39; #test .br＆＃39;）。click（function（）{

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);
    }
 });
})
});

内容加载AJAX后，Jquery无法正常工作

3 个答案: