jQuery单击不将值适当地附加到文本框

Question

我正在尝试将单词bank wordBank_Headings中的单词添加到文本框#textBox。

我的jQuery正在运行，因为我已经使用其他元素测试了click函数，例如$("#textBox").click(function (event) {，然后log("testing : " + $(this).attr('word'));输出“testing：undefined”。

当用户点击某个字词时，它会被发送到文本框：

我在Chrome中检查了HTML。我看到这些单词在spans中被正确包装。

我不确定为什么单击这些单词会起作用。

这是我的代码：

$(document).ready(function() {
    //initially append words to word bank   
    $.getJSON("php/Quests.php", { "_questNum" : questNum},
        function(wordsArray) {
            $.each(wordsArray, function(key, value) {   
                $(".wordBank_Words").append("<span class='bankword' word='" + key + "' ><b>" + key + "</b>: " + value + "</span><br/>");
            }
        );
    });

    /*If user clicks word in word bank, word is added to text box*/
    $(".bankword").click(function (event) {
        log("testing : " + $(this).attr('word'));
        $('#textBox').val($('#textBox').val() + " " + $(this).attr('word'));        
        //hide word from word bank
        $(this).hide();
    });


    /*If User removes word from text box, add it back to word bank*/
    $('#textBox').on('change', function(){
        var words = $(this).val().split(' ');
        $('.bankword').each(function(){
           if( words.indexOf( $(this).attr('word') ) !== -1 ){
               $(this).hide();
           }
           else {
               $(this).show();
           }
        });
    });
});

Answer 1

我认为您在创建文档后创建了span元素。因此，您应该针对on事件尝试click。你可以尝试如下：

$(document).on('click',".bankword",function (event) {
   log("testing : " + $(this).attr('word'));
   $('#textBox').val($('#textBox').val() + " " + $(this).attr('word'));        
   //hide word from word bank
   $(this).hide();
});

Answer 2

你知道吗？看起来您尝试在创建之前将侦听器附加到跨距。你只需要替换这一行

$(".bankword").click(function (event) {

这一个

$(".wordBank_Words").on('click', ".bankword", function (event) {