JavaScript的jQuery綁定

Question

我有問題與JavaScript需要你的幫助，任何想法高度讚賞。

我使用jQuery來創建一個錨，並用javascript函數如下其綁定：

$(document).ready 
    (
     function() 
     { 
       var test = function(arg) 
          { 
           alert(arg); 
          } 
       var anotherTest = function(arg) 
            { 
             do something; 
            } 
       $('#id').click 
       (
        var content = "Hello world"; 
        var anchor = "<a href='javascript:void(0);' onclick='test(\"" + content + "\")' >test</a>"; 

        $('#DivToBind').prepend(anchor); 
       ); 
      } 
    ); 

而且問題是：測試函數總是提醒「一個」，不管是什麼內容的價值是; 如果我更改onclick功能測試另一個測試，沒有發生，但「另一個測試未定義」出現在錯誤控制檯中

提前致謝。

---

非常感謝您的快速回復。 我仍然在檢查你的答案

爲了更好地找出我的問題，我總結我的實際代碼如下

$(document).ready 
    (
     function() 
     { 

        var deleteComment = function (comment) 
        { 
          commentInfo  = comment.split('_'); 
         var postid   = commentInfo[0]; 
         var enum  = commentInfo[1]; 
         var parentid = commentInfo[2]; 
         var user  = commentInfo[3]; 
         var author  = commentInfo[4]; 
         var date  = commentInfo[5]; 

         $.get 
         (
          "ajaxhandle.php", 
          {ref: 'commentdelete', pid: postid, d: date}, 
          function(text) 
          { 
           if (text) 
           { 
            //alert(comment); 
            $('#' + comment).html(''); 
           } 
           else 
           { 
            alert("Something goes wrong"); 
           } 
          }, 
          'text' 
         ); 
        }; 
      var test = function(arg) {alert(arg);}; 

      $('#postCommentButton').click 
      (
       function ($e) 
       { 
        $e.preventDefault(); 
        var comment = $('#postdata').val(); 
        var data = $('form#commentContent').serialize(); 
        //alert(data); 
        $.post 
        (
         "ajaxhandle.php", 
         data, 
         function($xml) 
         { 
          $xml = $($xml); 
          if ($xml) 
          { 

           //alert(45); 
           var success   = $xml.find("success").text(); 
           if (success == 1) 
           { 
            $('#postdata').val(""); 
            var id    = $xml.find("id").text(); 
            var reference  = $xml.find("reference").text(); 
            var parentid  = $xml.find("parentid").text(); 
            var user   = $xml.find("user").text(); 
            var content   = $xml.find("content").text(); 
            var authorID  = $xml.find("authorid").text(); 
            var authorName  = $xml.find("authorname").text(); 
            var converteddate = $xml.find("converteddate").text(); 
            var date   = $xml.find("date").text(); 
            var avatar   = $xml.find("avatar").text(); 

            comment = id + '\_wall\_' + parentid + '\_' + user + '\_' + authorID + '\_' + date; 

            //alert(comment); 
            var class = $('#wallComments').children().attr('class'); 
            var html = "<div class='comment' id='" + comment + "' ><div class='postAvatar'><a href='profile.php?id=" + authorID + "'><img src='photos/60x60/" + avatar +"' /></a></div><div class='postBody' ><div class='postContent'><a href='profile.php?id=" + authorID + "'>" + authorName + " </a>&nbsp;<span>" + content + "</span><br /><div class='timeline'>Posted " + converteddate + "<br /><a href=''>Comment</a> &nbsp; | &nbsp; <a href=''>Like</a>&nbsp; | &nbsp; <a href='javascript:void(0);' onclick='deleteComment(\"" + comment + "\")' class='commentDelete' >Delete</a></div></div></div><div style='clear:both'></div><hr class='hrBlur' /></div>"; 

            if (class == 'noComment') 
            { 
             //alert($('#wallComments').children().text()); 
             //alert(comment); 
             $('#noComment').html(''); 
             $('#wallComments').prepend(html); 
            } 
            else if(class = 'comment') 
            { 
             //alert(comment); 

             $('#wallComments').prepend(html); 
            } 
           } 
           else 
           { 
            alert("Something goes wrong"); 
           } 
          } 
          else 
           alert("Something goes wrong"); 
         }, 
         'xml' 
        ); 


       } 
      ); 



      $(".comment").find('.commentDelete').click 
      (
       function($e) 
       { 
        $e.preventDefault(); 
        var comment  = $(this).parent().parent().parent().parent().attr('id'); 
        deleteComment(comment); 
       } 
      ); 
     } 
    ); 

Answer 1

VAR測試= ...是一個函數裏面，它不會在範圍在頁面上當你想調用它時點擊錨點。

爲了使它成爲全球性的，你可以放棄變種。

你也可以這樣做：

$(document).ready 
(
    function() 
    { 
      var test = function(arg) 
         { 
          alert(arg); 
         } 
      var anotherTest = function(arg) 
           { 
           //do something; 
           } 
      $('#id').click 
      (
       function(){ 
       var content = "Hello world"; 
       var anchor = "<a href='javascript:void(0);'>test</a>"; 
       $(anchor).click(function(){ test(content); }); 
       $('#DivToBind').prepend(anchor); 
      }); 
     } 
); 

Answer 2

我想了很多的代碼在這裏失蹤。

但無論如何，爲什麼你不使用jQuery的力量綁定事件？

$(document).ready(function() { 
    var test = function(arg) { 
     alert(arg); 
    } 

    var anotherTest = function(arg) { 
     alert("another: " + arg); 
    } 

    $('#id').click(function() { 
     var content = "Hello world"; 
     var anchor = $("<a href='#'>test</a>").click(function() { test(content); }); 
     //apply anchor to DOM 
    }); 
}); 

Answer 3

我認爲這是你在找什麼：

$(document).ready(function() { 
    var test = function(arg) { 
     alert(arg); 
    }; 
    var anotherTest = function(arg) { 
     alert("we did something else:" + arg); 
    }; 
    $('#id').click(function() { 
     var content = "Hello world"; 
     var anchor = $("<a>test</a>").click(function(event) { 
     event.stopPropagation(); 
     // test(content); 
     anotherTest(content); 
     }); 

     $('#DivToBind').prepend(anchor); 
    }); 
    } 
); 

這個例子顯示了良好的使用event.stopPropagation()。將錨點的href設置爲void()或#通常是一個錯誤。

Answer 4

您的示例不完整。綁定click的調用缺少function包裝（所以這是一個語法錯誤，甚至不會解析）;沒有提及調用anotherText;，並且錨從未實際創建，只有一個字符串。所以從這裏修復是不太可能的。

一般避免從HTML字符串創建動態內容。由於您不是HTML轉義content，如果它包含各種特殊字符（<"'&），您的腳本將失敗，並且您可能有跨站點腳本安全漏洞。相反，創建錨，然後從劇本編寫任何動態屬性或事件處理程序：

$(document).ready(function() { 
    function test(arg) { 
     alert(arg); 
    } 

    $('#id').click(function() { 
     var content= 'Hello world'; 
     $('<a href="#">test</a>').click(function(event) { 
      test(content); 
      event.preventDefault(); 
     }).appendTo('#somewhere'); 
    }); 
}); 

這可能是最好使用風格像一個鏈接，而不是一個真正的鏈接<button>，因爲它不會去任何地方。一個<span>作爲鏈接樣式是另一種可能性，最好具有tabindex屬性，以使其在該情況下可用鍵盤訪問。

Answer 5

如果你使用jQuery，我會建議使用像這樣的事件處理函數：

$(document).ready(function() { 
    var test = function(arg){ 
     alert(arg); 
    } 
    var anotherTest = function(arg){ 
     // do something; 
    } 
    $('#id').click(function(event){ 
     var content = "Hello world"; 
     var anchor = $("<a>test</a>"); 

     anchor.click(function(event){ 
      event.preventDefault(); // instead of javascript:void(); 
      test(content); 
     }); 

     $('#DivToBind').prepend(anchor); 
    }); 
});