动态创建标签onclick函数不会在jquery中触发

Posted 2023-05-08

【中文标题】动态创建标签onclick函数不会在jquery中触发

【英文标题】：dynamically created a tag onclick function not triger in jquery

【发布时间】：2020-09-20 01:27:45

【问题描述】：

我使用 jquery mobile 开发了一个网络应用程序。我想通过单击我动态创建的锚标记来调用一个函数。但它没有触发并表示该功能未定义。任何帮助将不胜感激。

这是我的代码

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

【问题讨论】：

itemClicked 是否定义在全局范围内？

@Taplar 在我的 onload 函数中没有，但是当我在锚标记之外调用该函数时，它的调用没有问题

【参考方案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>