Question

我加载一个表单并从PHP文件中通过AJAX动态填充select。在实现动态AJAX填充选择之前，我的更改功能有效（当用户选择“其他”时，它只显示另一个输入）。现在改变功能不起作用。

我知道ready函数正在触发，因为jStepper函数运行。我已尝试使用ready函数内外的更改函数。我觉得在AJAX get结束之前加载了更改函数，但这真的很重要吗？

var types = "<select name='ve_categoryNo' id='ve_categoryNo'>";
var d = new Date();
$.get('scripts/vehicle_category_feed.php?date=' + d.getTime(), function ($type)
{
    $($type).find('type').each(function ()
    {
        types += "<option value='" + $(this).attr("categoryno") + "'>" + $(this).attr("category") + "</option>";
    });
    types += "<option value='other'>Other(Specify)</option></select>";
    $('#ve_categoryNo_td').html(types);
});
$(document).ready(function ()
{
    $('input[type=text]').click(function ()
    {
        $(this).select();
    });
    $('#vehicle_entry').ajaxForm(function ()
    {
        showMessage('vehicle_information_added');
    });
    $('#ve_ariNo').jStepper({minValue: 1, maxValue: 99999999});
    $('#ve_fleetNo').jStepper({minValue: 1, maxValue: 999999999});
    $('#ve_vehicleYear').jStepper();
    $('#ve_purchasePrice').jStepper({minValue: 0});
    $('#ve_categoryNo').change(function ()
    {
        if ((this.value) == "other")
        {
            $('#otherCategory').show();
            $('#otherCategory input[type=text]').focus();
        } else
        {
            $('#otherCategory').hide();
        }
    });
});

Answer 1

修改：

$('#ve_categoryNo').change(function() {

到

$(document).on('change', '#ve_categoryNo', function() {

EDIT3：在仔细检查您的代码后，这将表现最佳：

   $('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() {

因为它最接近所讨论的元素。

您还应该将ajax调用放在我认为的准备好的脚本中。

发生这种情况的原因是DOM在实例化时没有任何东西可以绑定到它。以这种方式使用.on将其绑定到文档。如果你有另一个包含它的“固定”元素，那么使用它来代替“文档”绑定可能会更好，因为它可能会表现得更好。

编辑：请注意，在将元素作为ajax调用完成的一部分注入后，您也可以添加更改事件管理，但是如果您多次执行此操作，则应该在这种情况下首先解除绑定。

EDIT2：既然有问题/意见：来自文件：http://api.jquery.com/on/

在文档顶部附近附加许多委托事件处理程序树会降低性能。每次事件发生时，jQuery都必须比较该类型的所有附加事件的所有选择器从事件目标到最高层的路径中的元素文献。为获得最佳性能，请在文档中附加委派事件位置尽可能接近目标元素。避免过量使用document或document.body来处理大型的委托事件文档。

Answer 2

我认为你在行中绑定的元素是：

$('#ve_categoryNo').change(function() { ...

在DOM中尚不存在，因此事件不会受到限制。

尝试使用.live功能：

$('#ve_categoryNo').live('change', function() { ... });

或者在尝试将事件绑定到它们之前确保您的DOM元素存在。

Answer 3

从文档准备到更改工作Ajax功能

$(document).change(function(){
  $("#next").click(function() {
     var questionid = $('#question').val();         
     var assementid = $('#assement').val();         
     var userid     = $('#user').val();         
     if($('.ansradio').is(':checked')) { 
        var answer = $('input[name=ans]:checked', '#questionajax').val();
        $.ajax({
           type: "POST",
           url: "answer/",
           data: "q_id="+questionid+"&a_id="+assementid+"&answer="+answer+"&user_id="+userid,
           success: function(html){
              $("#questionajax").html(html).show();
           }
        });
     }
     else{
        alert("Please answer the questions");
     }     
  });

}）;

使用AJAX加载html后，为什么jQuery更改函数不起作用？

3 个答案: