JavaScript jQuery 绑定答案

【问题标题】：JavaScript jQuery bindingJavaScript jQuery 绑定
【发布时间】：2010-12-29 20:07:53
【问题描述】：

我正在使用 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 is not defined”

编辑

为了更好地识别我的问题，我将我的真实代码总结如下

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

【问题讨论】：

您可以将代码放在一个特殊格式的块中，方法是在每行前面加上 4 个空格，或者突出显示所有代码并单击代码图标（看起来像二进制 1 和 0）
你的 javascript 语法都被抬高了。你想解决什么问题？我们可以修复语法问题，但是这个 [pseudo] 代码无论如何都没有做任何事情。
这就是制表符与空格的争论如此重要的原因。仅限空格！
编辑器中 1 个制表符 = 4 个空格或 2 个空格的情况还不错。一些编辑器非常友好地为您执行从制表符到空格的转换。

标签： javascript jquery binding

【解决方案1】：

我想这就是你要找的东西：

$(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() 或 # 通常是错误的。

【讨论】：

【解决方案2】：

如果您使用的是 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);
    });
});

【讨论】：

【解决方案3】：

您的示例不完整。绑定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 属性以使其在这种情况下可通过键盘访问。

【讨论】：

【解决方案4】：

var test=... 在函数内部，当您想在锚点上调用它时，它不会在页面范围内。

要使其全局化，您可以省略 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);
            });
        }
);

【讨论】：

【解决方案5】：

我认为这里缺少很多代码。

但无论如何，你为什么不使用 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
    });
});

【讨论】：