如何从href调用javascript函数？

Question

我有两个JavaScript函数madeAjaxCall（）和getBookCall（bookId）分别获取书籍清单和章节清单。

我想从函数madeAjaxCall（）中调用getBookCall（bookId）。

function madeAjaxCall(){ 
$.ajax({ 
    type: "GET", 
    url: "http://localhost:8080/restApp/book/list", 
    contentType:"application/json; charset=utf-8", 
    dataType:"json", 
    success: function(data){ 
      delete_table(); 
      if(data){ 
       var len = data.length; 
       var txt = ""; 
       txt += "<tr><th>"+"bookId"+"</th><th>"+"bookName"+"</th><th>"+"Chapter Details"+"</th></tr>"; 
       if(len > 0){ 
        for(var i=0;i<len;i++){ 
         if(data[i].bookId != null && data[i].bookName != null){           
          /* txt += "<tr><td>"+data[i].bookId+"</td><td>"+data[i].bookName+"</td><td><a href="+ "http://localhost:8080/restApp/chapter/list/"+ data[i].bookId +">"+"Chapter details"+"</a></td></tr>";  */   
          txt += "<tr><td>"+data[i].bookId+"</td><td>"+data[i].bookName+"</td><td><a href="+ "#"+" "+ "onclick=" + +"getBookCall("+ data[i].bookId + ")"+";return false;" +">"+"Chapter details"+"</a></td></tr>";     

         } 
        } 
        if(txt != ""){ 
         $("#table1").append(txt).removeClass("hidden"); 
        } 
       } 
      } 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
      alert('error: ' + textStatus + ': ' + errorThrown); 
     } 
    }); 
    return false; 
} 

而其他功能

function getBookCall(bookId){ 
$.ajax({ 
    type: "GET", 
    url: "http://localhost:8080/restApp/chapter/list/"+bookId, 
    contentType:"application/json; charset=utf-8", 
    dataType:"json", 
    success: function(data){ 
      delete_table2(); 
      if(data){ 
       var len = data.length; 
       var txt = ""; 
       txt += "<tr><th>"+"chapterId"+"</th><th>"+"chapterName"+"</th></tr>"; 
       if(len > 0){ 
        for(var i=0;i<len;i++){ 
         if(data[i].chapterId != null && data[i].chapterName != null){ 
          txt += "<tr><td>"+data[i].chapterId+"</td><td>"+data[i].chapterName+"</td></tr>";     
         } 
        } 
        if(txt != ""){ 
         $("#table2").append(txt).removeClass("hidden"); 
        } 
       } 
      } 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
      alert('error: ' + textStatus + ': ' + errorThrown); 
     } 
    }); 
    return false; 
} 

我从功能madeAjaxCall（）获得的书籍，JSON列表和附加表中的列表中。我想在函数madeAjaxCall（）中通过href调用函数getBookCall（bookId）。但是我无法使用函数madeAjaxCall（）中的href调用函数getBookCall（bookId）。

这是函数madeAjaxCall中函数getBookCall（bookId）无法调用的行。

txt += "<tr><td>"+data[i].bookId+"</td><td>"+data[i].bookName+"</td><td><a href="+ "#"+" "+ "onclick=" + +"getBookCall("+ data[i].bookId + ")"+";return false;" +">"+"Chapter details"+"</a></td></tr>";     

Answer 1

在这里，比如我使用自定义data-*属性存储bookid，可以使用.data()是牵强，创建你的锚状：

txt += '<a class="myBookLink" href="#" data-bookid="' + data[i].bookId + '">Chapter details</a>"; 

然后使用Event Delegation使用.on()委派事件的方法来绑定锚的点击事件处理程序。

$(document).on('click', function(){ 
    getBookCall($(this).data('bookid')) 
    return false; 
}) 

重要提示：在地方的document你应该总是使用最接近的静态容器。

对于即时解决方案正确使用报价。

txt += "<tr><td>" 
    + data[i].bookId 
    + "</td><td>" 
    + data[i].bookName 
    +'</td><td><a href="#" onclick="getBookCall('+ data[i].bookId + ');return false;">Chapter details</a></td></tr>'; 

代替

txt += "<tr><td>"+data[i].bookId+"</td><td>"+data[i].bookName+"</td><td><a href="+ "#"+" "+ "onclick=" + +"getBookCall("+ data[i].bookId + ")"+";return false;" +">"+"Chapter details"+"</a></td></tr>";