jQuery脚本在通过AJAX加载相同的HTML后不起作用

Question

在将我的问题标记为重复之前，

我尝试了与我的问题相关的现有问题提供的解决方案，但不幸的是，这些解决方案都不起作用。这就是我的问题。我有一个片段，看起来像这样：

<input type='text' class='input-mini' name='library_fee' readonly/>

现在有一个按钮可以通过AJAX执行查询，返回一个新的html，如下所示：

CCD_ 2。然后，它将返回一个新的HTML，其中包含数据库中的值的value属性。它现在会填满曾经空着的文本框

注意：My Query和My AJAX运行良好，没有任何问题

---

问题

我有一个脚本，它有一个函数，每当您单击文本框时，它就会删除只读属性。

$(document).ready(function()
{
    $('input:text').on('click', function()
    {
        if($(this).is('[readonly]'))
        {
            $(this).removeProp('readonly');
        }
    });
});

在通过AJAX重新加载页面之前，这种方法一直很好。为什么

Answer 1

您需要使用委托：

$(document).ready(function()
{
    $(this).on('click','input:text', function()
    {
        if($(this).is('[readonly]'))
        {
            $(this).removeProp('readonly');
        }
    });
});

这里$(this)指的是文档，作为委托目标，您应该使用最接近的公共静态容器（如果有的话）。

Answer 2

由于input是动态添加的，因此需要使用事件委派来注册事件处理程序，如：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', ':text', function(event) {
    ....
});

Answer 3

如果我正确理解这一点，您将用另一个通过AJAX从服务器加载的字段替换一个输入字段。

请理解，jQuery事件绑定只在触发$（document）.ready（）时发生一次。除非再次触发此事件，否则在替换输入时，该事件不会绑定到新输入。

当从AJAX响应加载它时，手动绑定它可能是这里的方法。