表單未提交通過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'); 
});