jQuery click not appending values appropriately to textbox

Question

I'm trying to append a word in the word bank wordBank_Headings to the textbox #textBox.

My jQuery is working because I've tested the click function with other elements, such as $("#textBox").click(function (event) {, then log("testing : " + $(this).attr('word')); outputs "testing : undefined".

When a user clicks on a word, it will be sent to the textbox:

enter image description here

I checked HTML in Chrome. I see the words are being wrapped appropriately in the spans.

enter image description here

I'm not sure why clicking on the words won't work though.

Here is my code:

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

You shouldn't create your own attributes for elements. Use `data-XXX` for application data. — Barmar, Feb 03 '14 at 04:02
Because they might some day conflict with standard attributes. `data-XXX` are explicitly reserved for applications and will never conflict. — Barmar, Feb 03 '14 at 04:05
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Barmar, Feb 03 '14 at 04:08
I agree with Barmar, you could also use the jQuery data function. — PitaJ, Feb 03 '14 at 04:12

score 3 · Accepted Answer · answered Feb 03 '14 at 04:10

I think you create a span element after document is created. So, you should try on for your click event. you can try as below:

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

score 1 · Answer 2 · answered Feb 03 '14 at 04:15

1

You know what? Looks like You try to attach listeners to the spans before they're created. You just have to replace this line

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

with this one

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

answered Feb 03 '14 at 04:15

Sergey Semenov

369
2
7

jQuery click not appending values appropriately to textbox

2 Answers2