使用AJAX加载html后，为什么jQuery更改函数不起作用？ [英] Why doesn't a jQuery change function work after loading html with AJAX?

问题描述

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

I load a form and dynamically populate a select via AJAX from a PHP file. Before implementing the dynamic AJAX populated select, my change function works (it just shows another input when a user selects 'other'). Now the change function does not work.

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

I know the ready function is firing because the jStepper functions run. I have tried this with the change function in and outside the ready function. I have a feeling the change function loads before the AJAX get is finished, but does that really matter?

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();
        }
    });
});

推荐答案

修改此：

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

到

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

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

This would perform the best after an examination of your code more closely:

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

因为它最接近有问题的元素。

as it binds closest to the element in question.

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

You should also put the ajax call inside the ready script I would think.

出现这种情况的原因是在实例化时，DOM中没有任何东西可以绑定到它。以这种方式使用.on将它绑定到文档。如果你有另一个固定元素包装它，最好绑定到使用它的那个文件a它可能会表现得更好。

The reason this is occuring is that there is nothing in the DOM to bind to when it is instantiated. Using the .on in this manner binds it to the document instead. If you had another "fixed" element that wraps it, it might be better to bind to that using that in place of "document" as it would likely perform better.

编辑：请注意，在注入元素作为ajax调用完成的一部分之后，你也可以添加更改事件管理，但是如果你不止一次这样做，在这种情况下你应该首先取消绑定。

Note that you COULD also add the change event management after you inject the element as part of the ajax call completion, but if you do this more than once, you should unbind it first in that case.

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

since there are questions/comments: FROM THE DOCUMENTATION: http://api.jquery.com/on/

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

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

这篇关于使用AJAX加载html后，为什么jQuery更改函数不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！