Question

我使用jQuery和Ajax。当我刷新页面时，jQuery UI效果应用于Ajax响应。

但是当我发回另一篇文章时，jQuery UI效果不适用于新的回复。

我无法弄清楚我的代码有什么问题。

这是我的代码

$(document).ready(function() {
    $("#sendemp").click(function(e) {
            e.preventDefault();
            var submit_val = $("#searchbox").val();
            //alert('submitval is ' + submit_val);


            $.ajax( {
                type : "POST",
                //dataType :"jason",
                url : "./wp-admin/admin-ajax.php",
                data : {
                    action : 'employee_pimary_details',
                    user_name : submit_val
                },
                success : function(data) {
                //      alert('hhh');
                    $('#accordion21').html(data);
                    // $( "#searchbox" ).autocomplete({
                    // source: data
                    // });
                }
            });
        });
   });

我使用jQuery手风琴盒。我从$('#accordion21').html(data);获得的响应将应用于jQuery UI Accordion。

在我的PHP代码中，我有以下

$jason .=  '<h3 style="font-size:15px;">';
    foreach($employee as $key=> $value){
        $jason .= '<table><tbody>';
        $jason .= '<tr><td style="width:400px;padding:5px;padding:10px;"></td><td style="width:300px;padding:5px;"><img style="width:132px; height:175px;" src="'.$image_folder.$value->prfil_img .'" /></td></tr>';
    //$retval .= '<a href="'. $store_url . 'product_info.php?products_id=' . $product_id . '"><img src="' . $image_folder . $product_image . '" /></a><br />';

        $jason .= '<tr><td style="width:30%;font-size:14px;paddig:10px;">'.'Name:'.'</td>'.'<td style="font-size:14px;paddig:5px;">'.$value->first_name.'&nbsp;&nbsp;'.$value->last_name.'</td></tr>';
        $jason .= '<tr><td style="width:30%;font-size:14px;paddig:10px;">'.'Email:'.'</td>'.'<td style="font-size:14px;paddig:5px;">'.$value->email;'</td></tr>';
        $jason .= '<tr><td style="width:30%;font-size:14px;paddig:10px;">'.'Tel Ext:'.'</td>'.'<td style="font-size:14px;paddig:5px;">'.$value->extension;'</td></tr>';
        $jason .= '<tr><td style="width:30%;font-size:14px;paddig:10px;">'.'att:'.'</td>'.'<td style="font-size:14px;paddig:5px;">'.$value->att;'</td></tr>';
        $jason .= '</table></tbody>';
        // echo '</br>';echo '</br>';

   }
        $jason .= '</h3>';

jQuery UI将应用于<h3>和<div>

http://jqueryui.com/accordion/

Answer 1

您希望在页面加载时初始化autocomplete，然后在要通过setter方法分配source的后续ajax请求中初始化：

$(document).ready(function() {
    $("#searchbox").autocomplete({ source: [] });
    $("#sendemp").click(function(e) {
            e.preventDefault();
            var submit_val = $("#searchbox").val();
            //alert('submitval is ' + submit_val);


            $.ajax( {
                type : "POST",
                //dataType :"jason",
                url : "./wp-admin/admin-ajax.php",
                data : {
                    action : 'employee_pimary_details',
                    user_name : submit_val
                },
                success : function(data) {
                //      alert('hhh');
                    $('#accordion21').html(data);
                     $( "#searchbox" ).autocomplete("option", "source", data);

                }
            });

        });
   });

但是jQuery UI Autocomplete实际上提供了自动执行此操作的代码。查看source属性的文档。

Answer 2

嗨，我可以解决这个问题，

我所做的是我改变了成功的代码

success : function(data) {
                //      alert('hhh');
                    $('#accordion3').accordion('destroy');
                    $('#accordion3').html(data);

                    $("tr:odd").css("background-color", "#F8F8F8");
                    //$("#accordion3").accordion( "disable" );
                    $("#accordion3").accordion({ active: 0 });

                }

在$(document).ready(function() {之外，我对代码进行了以下更改

 $(function() {
    $("#accordion3").accordion({ 
    // heightStyle: "fill",
    active: 0 });
  });

Reson更改代码如上所示是以下链接:) helped link

下次刷新页面时，jQuery效果不起作用

2 个答案: