JavaScript jQuery綁定

Question

我正在使用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);
                );
            }
    );

問題是：無論內容的價值是什么，測試功能總是警告“a”。 如果我將onclick函數測試更改為anotherTest，則沒有任何反應，但錯誤控制台中出現“anotherTest未定義”

編輯

為了更好地識別我的問題，我總結了我的實際代碼如下

   $(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 test = ...在函數內部，當你想要調用它時，它不會在頁面上的范圍內。

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

你也可以這樣做：

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

你的例子不完整。 結合呼叫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>而不是真實鏈接的<button>樣式，因為它不會去任何地方。 作為鏈接設置的<span>是另一種可能性，最好具有tabindex屬性，以便在該情況下使其可用於鍵盤。

Answer 3

我想這里缺少很多代碼。

但無論如何，為什么不使用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 4

我想這就是你要找的東西：

$(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()良好用法。 將anchor的href設置為void()或#通常是一個錯誤。

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