javascript - jQuery 单击未将值适本地附加到文本框

Question

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

我的 jQuery 可以正常工作，因为我已经用其他元素测试了点击功能，例如 $("#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 元素。因此，您应该为您的 click 事件尝试 on。你可以尝试如下:

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