AJAX get方法在第二次点击时不起作用 - AJAX get method doesn't work on second click

AJAX get method doesn't work on second click

我使用jQuery v1.7.2。

下面的代码在bootstrap(2.2.1)模态形式中生成适用的复选框:

    $sql1="Select $sub_listing_id,$sub_listing_name FROM $sub_listing";
    $results=$wpdb->get_results($sql1,ARRAY_A);
    $html_code= '<form id="multiselect">';
    $num=0;
    foreach($results as $key=>$value)
    {
        foreach($value as $k1=>$v1)
        {        
            if($k1==$sub_listing_id)
            {
                $sub_listing_id_val=$v1;
            }
            if($k1==$sub_listing_name)
            {
                $sub_listing_name_val=$v1;
    $html_code.= '<input type="checkbox" name="list" value="'.$sub_listing_id_val.'">&nbsp;&nbsp;'.$sub_listing_name_val.'&nbsp;&nbsp;&nbsp;&nbsp;';
    $num=$num + 1;
    if($num%5==0)
    $html_code.= '<br/><br/>';
            }
        }
    }
    $html_code.= '</form>';
    echo $html_code;

现在，我选择一些复选框，并通过以下jQuery传递选定的值:

$('#btn-add-sub-listing-save').click(function (e){
    e.preventDefault();
    var ajax_url='add_sub-listing.php';
    var dataString=$('#multiselect').serialize();
    showLoader('.modal-body');
    dataString=dataString.replace(/&/g,' AND ');
    $.ajax({
    url: ajax_url + '?' + dataString,
    type: 'GET',
    dataType: 'html',
    success: function(data){
        $('.modal-body').html(data);
    }
});
});

如果编辑jQuery:

$('.modal-body').html(dataString);

效果很好。这意味着#multiselect一直被序列化，但它不会被追加第二次。因此，我无法在登陆页面上获取值，因此无法继续。

我使用了cache: false和async:false。但是，这行不通!请提出你的建议。

也许bootstrap- mode -cache与此有关。我以前通过使用以下jQuery克服了这种情况:

$('.btn-add-sub-listing').click(function (e){
    e.preventDefault();
    $('#add-sub-listing-modal').removeData("modal");
    $('#add-sub-listing-modal').modal({remote: $(this).attr("href")})
    $('#add-sub-listing-modal').modal('show');
});

这里我用的是"href"。我可以为按钮"href"不适用吗?

你很有可能，当你替换HTML时，用一个新的按钮替换按钮，这将解除点击事件。

每次替换HTML内容时都应该重新连接click事件，或者使用jQuery on方法连接事件。这将适用于在事件触发时在body下匹配的任何按钮元素。

$('body').on('click', '#btn-add-sub-listing-save', function(e)
{
    // handler as before
});

添加一个Temp变量并在ajax之前检查它

这对我有用

$('body').on('click', '#btn', function(e)
{
    // you code here
});