CODEWITHSUNDEEP
javascriptjqueryhtml
pattmorter
pattmorter

Reputation: 991

Javascript doing what is expected

I am dynamically adding <script> tags with javascript & jQuery into my html file whenever a button is pushed. Everything gets added in correctly but only one of the two .click jQuery action functions is working. I can't seem to figure out why. No errors in console. I made sure i used \' and \" in the correct places.

$('#classBox').append('<tr id=\"' + tempCHAR + tempNUM + '\">' 
                + '<td>' 
                    + '<i id=\"' + tempCHAR + tempNUM + '\" class=\"icon-remove-sign\">'
                    + '</i> '
                    + '<a id=\"' + tempCHAR + tempNUM + '\"" href=\"https://cms.psu.edu/section/default.asp?id=' + urlHOLDER + '\" target="framehidden">' 
                        + tempYEAR + ': ' + tempCHAR + tempNUM + ', Section ' + tempSEC 
                    + '</a>'
                + '</td>'
            + '</tr>'
            + '<script>'
                + '$(\'#' + tempCHAR + tempNUM + '\').click(function() {'
                    + '$(\'tr\').remove(\'tr#' + tempCHAR + tempNUM + '\');'
                + '});'
                + '$(\'a#\'' + tempCHAR + tempNUM + ').click(function() {'
                    + '$(\'#framehidden\').attr(\'src\', $(\'a\', this).attr(\'href\')));'
                + '});'
            + '</script>');

The indents are just for me to more easily read what I'm doing. That wouldn't be the problem would it?

If thats too impossible to read then here it is in normal view.

$('a#'IST130).click(function() {
    $('#framehidden').attr('src', $('a', this).attr('href')));
});  
$('#IST130').click(function() {
    $('tr').remove('tr#IST130');
});

I have like 30 other .click functions that all work perfectly but I just cannot figure out what is going wrong here. Any hints?

Upvotes: 0

Views: 103

Answers (4)

Jon Egerton
Jon Egerton

Reputation: 41539

In your example at the end you have $('a#'IST130). Pretty sure that should read $('a#IST130)`

To correct it, change the generation for that ID to:

'$(\'a#' + tempCHAR + tempNUM + '\')...

Additionally, since you are dynamically adding the elements, their click events may not bind properly, depending on exactly when your code is executing.

You can use jquery on to set a bind for the events on a permanent element. In this case #classBox looks like a good bet. It might look something like this (where this would be inside a normal script block and outside of your dynamic stuff:

$('#classBox').on('click','a',function () {
    $('#framehidden').attr('src', $('a', this).attr('href')));
});

$('#classBox').on('click',function () {
    $(this).closest('tr').remove();
});

Note: Completely untested - intended as a guide!

Upvotes: 1

helion3
helion3

Reputation: 37361

After you fix the syntax errors, also be sure the click events aren't being attached before the append() code has run.

I can't tell which order the code runs in the actual page - if you're appending the elements before the click events are being attached, the elements may not exist yet. You can use jQuery's delegate method to ensure the events are called for all elements, no matter when they're appended to the DOM.

For example:

$('body').delegate('.anchorClassName', 'click', function(e){});

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Since .append() is instant (ie. synchronous), there is absolutely no need to put that stuff in a <script> tag. Instead, try this:

$('#classBox').append('<tr id=\"' + tempCHAR + tempNUM + '\">' 
            + '<td>' 
                + '<i id=\"' + tempCHAR + tempNUM + '\" class=\"icon-remove-sign\">'
                + '</i> '
                + '<a id=\"' + tempCHAR + tempNUM + '\"" href=\"https://cms.psu.edu/section/default.asp?id=' + urlHOLDER + '\" target="framehidden">' 
                    + tempYEAR + ': ' + tempCHAR + tempNUM + ', Section ' + tempSEC 
                + '</a>'
            + '</td>'
        + '</tr>');
$('#' + tempCHAR + tempNUM).click(function() {
    $('tr').remove('tr#' + tempCHAR + tempNUM);
});
$('a#' + tempCHAR + tempNUM).click(function() {
    $('#framehidden').attr('src', $('a', this).attr('href')));
});

That being said, your code is HORRIBLY invalid. IDs MUST be unique. I'll leave you to fix that in whatever way works best for you, but yeah.

Upvotes: 2

Patrick Moore
Patrick Moore

Reputation: 13344

Your error (or at least one of them) is on this line:

+ '$(\'a#\'' + tempCHAR + tempNUM + ').click(function() {'

Just have an extra single quote there that needs to be moved to the end of the $() block:

+ '$(\'a#' + tempCHAR + tempNUM + '\').click(function() {'

Upvotes: 2

Related Questions