使用 jquery 从动态添加的 html 代码调用函数

Call a function from Dynamically added html code using jquery

本文关键字：html 代码 调用 函数 添加 jquery 动态 使用      更新时间：2023-09-26

这是场景

$(document).ready(function(){
 var rowIndex = 0;
 var count = 0;
 function callThisFunction(index, value, count) {
 alert('called');
}
function dynamicContentAdd() {
 rowIndex++;
 count++;
 var row = "<input name='input["+rowIndex+"]' onkeyup = 'callThisFunction("+rowIndex+","+total[1]+","+count+");' id='input"+rowIndex+"'  type='text' class='inputfield' />";
 $("#table").append(row);
}

我已经在单击按钮时调用了函数 dynamicContentAdd（），它工作正常。但是不起作用的是它没有在keyup上调用函数callThisFunction（）。它给出未定义函数的错误。但是当我在外部js文件中具有相同的功能时，它会成功调用它。这不是从 jquery 中动态添加的 html 代码调用函数的方法吗？

请让我知道。

谢谢

问题是由于

您使用的是内联事件处理程序，因此 js 引擎将在全局范围内查找callThisFunction函数，但是您已在 dom ready 处理程序中添加了该函数，使其成为 dom ready handler 的本地函数，这将导致 js 抛出错误。

解决方案 1. 使函数全局化

//since the function is define outside of dom ready handler it is available in the global scope
function callThisFunction(index, value, count) {
    alert('called');
}
$(document).ready(function () {
    var rowIndex = 0;
    var count = 0;
    function dynamicContentAdd() {
        rowIndex++;
        count++;
        var row = "<input name='input[" + rowIndex + "]' onkeyup = 'callThisFunction(" + rowIndex + "," + total[1] + "," + count + ");' id='input" + rowIndex + "'  type='text' class='inputfield' />";
        $("#table").append(row);
    }
})

或

$(document).ready(function () {
    var rowIndex = 0;
    var count = 0;
    //define the function as a property of the window object again making it available in the public scope
    window.callThisFunction = function (index, value, count) {
        alert('called');
    }
    function dynamicContentAdd() {
        rowIndex++;
        count++;
        var row = "<input name='input[" + rowIndex + "]' onkeyup = 'callThisFunction(" + rowIndex + "," + total[1] + "," + count + ");' id='input" + rowIndex + "'  type='text' class='inputfield' />";
        $("#table").append(row);
    }
})

解决方案 2：jQuery 方式 - 使用具有 data-* 属性的委托事件处理程序

$(document).ready(function () {
    var rowIndex = 0;
    var count = 0;
    $('#table').on('keyup',  '.myfncaller', function(){
        var $this = $(this);
        var index = $this.data('index'), value = $this.data('value'), count = $this.data('count');
    })
    function dynamicContentAdd() {
        rowIndex++;
        count++;
        var row = "<input name='input[" + rowIndex + "]' id='input" + rowIndex + "'  type='text' class='inputfield myfncaller' data-index='" + rowIndex + "' data-value='" + total[1] + "' data-count='" + count + "' />";
        $("#table").append(row);
    }
})
相关文章：