如何從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形式的書籍列表，並將該列表附加到表中。 我想在href的幫助下從函數madeAjaxCall（）中調用函數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()來獲取bookid ，如下所示創建錨點：

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

然后使用事件委托，使用.on（）委托事件方法來綁定錨點的click事件處理程序。

$(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>";