Question

我在html上有以下内容

<html>
<head>
    <script src="../3003_Testing/js/jquery/dist/jquery.js"></script>
    <script src="../3003_Testing/js/search.js"></script>
<title>Search Box</title>
    <link href="mycss.css" rel="stylesheet">
</head>
<body>

<section class="main">
     <form class="search" >
         <input id="searchAddress" type="text" name="q" placeholder="Search address" oninput="getAddress()" />
         <ul class="results" id="addressList">
         <li id="staticli"><a href="index.html">Static li element<br><span>This is a Static li element</span></a></li>
         </ul>   
     </form>
</section>
</body>
</html>

我正在尝试编写一个函数来处理任何list元素被点击时的事件。但是当我点击<li>元素时，它似乎根本没有触发。

$('#addressList').on('click', 'li', function() {
    alert("clicked");
    alert( $(this).text() );

});

<li>元素是通过以下代码动态创建的：

listContents = $("<li id=\"" + i + "\"><a href=\"index.html\">" + addresses[i].lable + "</a></li>");
jQuery('#addressList').append(listContents);

我通过浏览器的控制台验证了它们是否正确创建

outerHTML: "<li id="0"><a href="index.html">6 Cashew Crescent<br><span>6 Cashew Crescent. (S)679751</span></a></li>"

让我们先忽略动态列表。事情是我的静态列表元素在点击时没有响应事件处理程序。一直试图找出问题几个小时..

我已经为我的静态li元素https://jsfiddle.net/tmu50t9z/

创建了一个jsfiddle

jsfiddle to my whole code＆gt; https://jsfiddle.net/8wwnx64x/

Answer 1

$('#addressList li').on('click', function() {
    alert("clicked");
    alert( $(this).text() );

});

Answer 2

工作代码，试试这个

HTML

<ul class="results" id='addressList'> </ul>
<button  id="aaa">Add LI</button>

的JavaScript

var a=0;
$('#aaa').click(function() {
 $('#addressList').append('<li id="'+a+'"><a href="index.html">6 Cashew     Crescent<br><span>6 Cashew Crescent. (S)679751</span></a></li>');
 a++
});
$( "#addressList" ).on( "click", "li", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

点击

2 个答案: