在通过AJAX加载相同的HTML后，jQuery脚本无效

Question

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

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

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

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

echo "<input type='text' class='input-mini' name='library_fee' value='". $fee['library_fee'] ."' readonly/>"。然后它将返回一个新的HTML，其值属性包含数据库中的值。它现在会填满曾经空的文本框

注意：我的查询和我的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是动态添加的，因此您需要使用event delegation来注册事件处理程序，如：

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

Answer 3

如果我理解正确的话，你将把输入字段替换为通过AJAX从服务器加载的另一个输入字段。

明白，当触发$（document）.ready（）时，jQuery事件绑定只发生在ONCE上。除非再次触发此事件，否则在替换输入时，事件不会绑定到新输入。

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