Question

我正在尝试为每个创建的p元素添加onclick事件。我需要在for循环中执行此操作，以便'data'数组中的其余信息与单击的结果相关。

这是一个自动完成搜索功能，可以查找联系人并在下拉列表中显示名称和公司名称。当您单击它时，它将使用其他信息（如电子邮件地址和电话号码）填写相应的字段。

我如何向for循环中的每个p元素添加onclick事件？

//Instant Search for Key Contact lookups
$(document).ready(function(){
    $('#search_customer').on("keyup input", function(){
        /* Get input value on change */
        var term = $(this).val();
        var resultDropdown = $("#result");
        var i = 0;
        var results = '';
        if(term.length){
            $.get("/profile/includes/custom/340/livesearch.php", {query: term}).done(function(data){
                // Display the returned data in browser
                data = jQuery.parseJSON(data);
              for (i = 0; i < data.length; i++) {
                results += '<p>' + data[i][0] + ' ' + data[i][1] + ' | <span>' + data[i][2] + '</span></p>';
              }
              resultDropdown.html(results);
            });
        } else{
            resultDropdown.empty();
        }
    });
});

我希望每个onclick的功能都是这样的：

p.on("click", function(){
        $("#search_customer").val(data[i][0] + ' ' + data[i][1]);
        $("#customer_email").val(data[i][[5]);
        $("#customer_company").val(data[i][6]);
    });

Answer 1

您可以向p元素添加一个类，然后为该类的单击创建一个事件处理程序。

所以在这一行：

results += '<p>' + data[i][0] + ' ' + data[i][1] + ' | <span>' + data[i][2] + '</span></p>';

添加课程：

results += '<p class="placeholderClassname">' + data[i][0] + ' ' + data[i][1] + ' | <span>' + data[i][2] + '</span></p>';

然后你的Jquery处理程序：

$( ".placeholderClassname" ).on( "click", function() {
  //Write code here
  alert( $( this ).text() );
});

您还可以在所有p元素上使用Jquery处理程序，但如果页面中有其他p元素，则可能会产生问题。

有关Jquery事件处理程序的更多信息：http://api.jquery.com/on/

将click事件添加到p个元素jQuery

1 个答案: