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); 
    }); 
});