Question

出于某种原因，我只能使用我的代码来处理旧学校的onclick事件。我怀疑以下尝试失败了，因为我实际上正在构建一个字符串，将其插入到结果div中并希望这些onclick绑定有效并且它们不会。

这应该是正确的方法，但没有任何反应..

$( "a.collection-item" ).on("click", function(e) {
console.log('test click event fired.');
});

这是LIVE DEMO的链接，以便您可以更好地将其可视化。这是一次实时搜索。

这是我正在搜索的data.json文件...

[
  {
    "name":"Sarah Connor",
    "client_id":"111"
  },
  {
    "name":"John Travolta",
    "client_id":"222"
  },
  {
    "name":"Tom Cruise",
    "client_id":"333"
  }
]

完整的JS代码。

＆＃13;

$(document).ready(function() {



$('#search').keyup(function(){

// the search input
var searchField = $('#search').val();

// if at least one char is typed...
if (searchField.length > 0) {

// A. Empty results div.
$('#results').empty();

// "i" = ignore case
var regex = new RegExp(searchField, 'i');

var output = '<ul class=\"collection\">';

// get JSON from PHP...
$.getJSON('data.json', function(data) {

// loop through JSON array of key/value pairs...
$.each(data, function(key, val){

// Returns a Number, representing the position of the first occurrence 
// of the specified searchvalue, or -1 if no match is found

// Here we search and compare against the -1 condition.
// Example... val.name.search(regex) different than NOT FOUND...

// If we got a match on name OR client_id....
if ((val.name.search(regex) != -1)) {

output += '<a href=\"/v94/client_select_distinct.php?client_id=' + val.client_id + '\" class=\"collection-item\" onclick=\"js_redirect(this, event)\">';
output += val.name;
output += '<span class=\"badge\">' + val.client_id + '</span>';
output += '</a>';
console.log('match!');

}
// end if

});
// end each

output += '</ul>';
// close ul tag

// output to results div
$('#results').html(output);

});
// end getJSON 

} else {

// clear results div
$('#results').empty();

}
// end search field length condition

});
// end keyup



});
// end document ready


function js_redirect(el, event) {

// Prevent the actual link redirect
event.preventDefault();

// Got to href location via Script instead.
window.location = el.href;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<!--Import Google JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body>

<div class="container">

<div class="row">
<div class="input-field col s12">
<input id="search" type="text" class="validate" placeholder="at least 1 character...">
<label for="search">Search</label>
<div id="results" style="position: absolute; top:48px; background: white;"></div>
</div>

</div>

</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>

＆＃13;

Answer 1

我没有在你的代码中看到你实际附加了那组侦听器，但是考虑使用事件委托。也就是说，不要将1,000个元素附加到同一个侦听器，将附加到单个侦听器的单个侦听器附加到匹配事件冒泡时才会被调用。处理它比在添加和删除元素时不断添加它更容易（与$('#results').empty()一样）。考虑：

$('#results').on('click', 'a', function(e){
    console.log('test click event fired.');
    alert('Just so you see it, in case your console clears ...');
});

代码仅适用于旧学校的onclick事件。为什么？

1 个答案: