在jquery中动态地创建了一个标签onclick函数，而不是triger。

Question

我使用jquery mobile开发了一个web应用程序。我想通过点击我动态创建的锚标签来调用一个函数，但它没有触发，并说该函数没有定义。

以下是我的代码

function itemSearch(para) {
    $.ajax({
        url: "http://localhost:4000/products/filter/"+para,
        contentType: 'application/json',
        dataType: 'json',
        type: 'GET',
        success: function(data) {

            let output='';
            for (var i = 0; i < data.length; i++) {
                let img="http://localhost:4000/"+data[i].ImgPath.replace("Product\\","");
                output +=`
                    <li>
                        <a onclick="itemClicked('${data[i]._id}')" href="#" >
                            <img src="${img}">
                            <h3>${data[i].Category}</h3>
                            <p>Price : ${data[i].Price}</p>
                        </a>
                    </li>
                    `
                $('#items').html(output).listview('refresh');
                $('#search').val("");
            }
        }
    });
}

function itemClicked(id) {
 alert(id);
}

Answer 1

由于 itemClicked 函数是在另一个函数的作用域内声明的。<a> 标签无法访问它。

这说明了这个问题，解决方法是将 itemClicked 到全球范围内。

window.onload = function () {
  function itemClicked () {
    alert('itemClicked');
  }
}();

function globalIemClicked () {
    alert('globalIemClicked');
}

<a onclick="itemClicked()" href="#">Run itemClicked</a><br/>
<a onclick="globalIemClicked()" href="#">Run globalitemClicked</a>