javascript - div 上的 onclick 功能不起作用

Question

我有一个函数可以在 keyup 事件上从数据库中获取记录。这是我的代码:

function displaySearch(key) {
$.ajax({
    type:"POST",
    url:"searchprofile.php",
    data:{
        k:key
    },
    success:function(data){
       var details_arr=data.split("+");
        $('.searchresult').empty();
        for(var i=0;i<details_arr.length-1;i++){
            $('.searchresult').append("<div class='profile' id='searchprofile'><img class='profilepic' src='images/profile.jpg'/><div class='doctorname'><div class='pname' onclick='saveName("+details_arr[i]+")'>"+details_arr[i]+"</div></div></div>");
            $('.searchresult').show();
            $('.searchresult .profile').show();
        }
        details_arr.length=0;
    }
});
}

但我在这里收到 javascript 错误，提示“意外的 token 非法”。如何为 onclick 函数提供 details_arr[i] 的值？请帮忙。

Answer 1

因为你有 jQuery，所以你真的不应该内联代码。如您所见，这使得处理带引号的字符串中的引号变得更加困难(是的，您在 saveName 的参数周围缺少引号)。

你可以这样做:

  (function(i){
      $('.searchresult').append(
        "<div class='profile' id='searchprofile'>"
        + "<img class='profilepic' src='images/profile.jpg'/>"
        + "<div class='doctorname'>"
        + "<div id=someId class='pname'>"+details_arr[i] // <- give some Id
        +"</div></div></div>"
      );
      $('#someId').click(function(){saveName(details_arr[i])});
  })(i);
  $('.searchresult').show();

请注意，我使用闭包来确保我在回调中具有所需的值(而不是迭代结束时的值)。

小心拆分:在大多数浏览器上 "+aaa".split('+') 生成 ["", "aaa"] 而当你不不要迭代到数组的末尾，这个示例字符串会让你什么都不迭代。