当我使用ajax时,jquery手风琴效果不起作用

时间:2013-07-17 06:52:19

标签: wordpress jquery-ui jquery

当我使用ajax时,我注意到Jquery效果不起作用。原因是“当您的jquery第一次运行时,您添加到DOM(页面)的新HTML不存在” another similar question

因此,我将代码更改为以下但仍然没有得到jquery效果。

我在哪里做错了?

以前的代码

$("#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
                // });

            }
        });

    });

新代码

$("button").on( "click", "#accordion3",function(){ 

$.ajax( {
    type : "POST",
    dataType : "json",
    url : "./wp-admin/admin-ajax.php",
    data : {
        action : 'employee_deatils_search',
        user_name : submit_val
    },
    success : function(data) {
    //      alert('hhh');


        $('#accordion3').html(data);
        $("tr:odd").css("background-color", "#F8F8F8");
        $("#accordion3").accordion({ heightStyle: "fill", active: 0 });
        // $( "#searchbox" ).autocomplete({
        // source: data
        // });

    }
});



} );

我有以下提交按钮

<input type="submit" id="sendemp" value="Search" />

3 个答案:

答案 0 :(得分:0)

我不认为您的点击绑定是正确的,如果您想要处理#accordion3内部按钮的点击,请将其更改为:

$("#accordion3").on( "click", "button",function(){...}); 

答案 1 :(得分:0)

没有你的html很难说,但是你的旧代码看起来就像是替换了sendemp按钮。在新代码中,您的事件委派未正确指定。您正在将委托应用于按钮元素(由于您的sendemp按钮是输入元素,因此不存在)。

将委托应用于#sendemp的父级,如下所示:

$('body').on('click', '#sendemp', function() {
     // your ajax call
});

答案 2 :(得分:0)

我可以解决这个问题,我尝试了使用on方法的上述解决方案。但是,这对我的问题没有意义。

正如下面的艺术解释我认为,手风琴已经被实例化并且效果持续存在。当它第二次被调用时,它不会再次创建,因为已经存在效果。

因此,我需要摧毁它并重新创造手风琴。 support link

我在成功时更改了代码,如下所示

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