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

Question

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

UPDATE 1： 奇怪的是它正在工作，但只是第一次填充productSearchQuery。任何后续的productSearchQuery都会遇到上述问题。

HTML：通过AJAX

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

HTML加载到productSearchResult：

<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> 

UPDATE 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

你必须要你se jQuery on method。

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