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

И проблема в том, что функция тестирования всегда предупреждает «а», независимо от значения контента. Если я изменяю тест функции 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

Ваш пример неполон. При вызове bind 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 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(). Установка ссылки якоря на void() или # часто является ошибкой.

Answer 4

Я думаю, что здесь много кода отсутствует.

Но в любом случае, почему бы вам не использовать силу 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 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);
    });
});