Question

我的代码存在以下问题：当通过AJAX填充“productSearchResult”时，使用“添加”按钮提交表单时不会包含内容。

更新1： 奇怪的是它正在运行，但只是第一次填充了productSearchQuery。任何后续的productSearchQuery都会遇到上面的问题。

HTML：

<form name="productSearch">
    <input name="productSearchQuery" type="textbox">
</form>
<form name="productAdd">
  <div id="productSearchResult"></div>
</form>
<a>Add</a>
<div id="addResult"></div>

通过AJAX加载到productSearchResult中的HTML：

    <input type="radio" name="productId" value="3944">
    <input type="radio" name="productId" value="3946">
    <input type="radio" name="productId" value="3999">

JS：

<script type="text/javascript">

function postData(type, url, data, targetDiv) {
    $.ajax({
        type: type,
        url: url,
        data: data,
        success: function(response) {
            $(targetDiv).html(response);
        },
        error: function() {
            alert('Error! Plese try again.');
        }
    });
    return false;
};

$(document).ready(function() {

    $('input[name=productSearchQuery]').keyup(function() {
        // submit the form
        postData('POST', 'search.php', $('form[name=productSearch]').serialize(), '#productSearchResult');
    });

    $('a').click(function() {
        postData('POST', 'add.php', $('form[name=productAdd]').serialize(), '#addResult');
    });

});

</script>

更新2： 好的，首先，我想在我的原帖中不包含此代码而道歉，老实说，我并不怀疑它可能是原因。在回滚带有单选按钮返回的JS后，我修复了我的代码。我无法理解为什么新的JS会导致上面的问题，而旧的JS却没有。

以下是可行的旧JS：

$('tr.product input[type=radio]').hide();

$('tr.product').mouseover(function() {
    $(this).addClass('blueHover');
}).mouseout(function() {
    $(this).removeClass('blueHover');
});

$('tr.product').click(function(event) {
    $('tr.product').removeClass('blueChecked');
    $(this).closest('tr').addClass('blueChecked');

    if (event.target.type !== 'radio') {
        $(':radio', this).attr('checked', true);
    }
});

以下是导致上述问题的新JS：

$('tr.product input[type=radio]').hide();

$(document).on({
    mouseenter: function () {
        $('td', $(this).parent()).addClass('blueHover');
    },
    mouseleave: function () {
        $('td', $(this).parent()).removeClass('blueHover');
    },
    click: function (event) {
        $('tr.product').removeClass('blueChecked');
        $(this).closest('tr').addClass('blueChecked');

        if (event.target.type !== 'radio') {
            $(':radio', $(this).parent().parent()).attr('checked', false);
            $(':radio', $(this).parent()).attr('checked', true);
        }
    }
}, 'tr.product td');

Answer 1

试试这个

<script type="text/javascript">

function postData(type, url, data, targetDiv) {
    $.ajax({
        type: type,
        url: url,
        contentType: 'application/json',
        data: data,
        success: function(response) {
            $(targetDiv).html(response);
        },
        error: function() {
            alert('Error! Plese try again.');
        }
    });
    return false;
};

$(document).ready(function() {

    $('input[name=productSearchQuery]').keyup(function() {
        // submit the form
        postData('POST', 'search.php', $('form[name=productSearch]').serialize(),     '#productSearchResult');
    });

    $('a').click(function() {
        postData('POST', 'add.php', $('form[name=productAdd]').serialize(), '#addResult');
    });

});

</script>

Answer 2

您必须使用jQuery on method。

$('body').on('click', 'a', function() {
     postData('POST', 'add.php', $('form[name=productAdd]').serialize(), '#addResult');
});

表单不提交通过AJAX填充的表单数据

2 个答案: