CODEWITHSUNDEEP
javascriptjqueryclick
Crossman
Crossman

Reputation: 278

Calling onClick events

I'm having a problem with my code, lemme first paste my code, most of it isn't important, just the context of it.

                $("#navbar > a").click(function(event) {
                $('#controls').show();
                var currentNum = parseInt($(this).attr('class'), 10);
                document.getElementById('pNum').innerHTML = "pg. " + (currentNum + 1);
                event.preventDefault();

                var t2 = ($(this).attr('id')).split("#");
                var $tr = $(zip.file(localStorage.selected + "/" + t2[0]).asText());
                document.getElementById('main').innerHTML = "";
                $('#main').append($tr);
                document.getElementById(t2[1]).scrollIntoView()
                current = ($(this).attr('class'));
                $(function() {
                    $("#main img").each(function() {
                        var imgPath = localStorage.selected + "/" + $(this).attr('src');
                        var imageData = zip.file(imgPath).asBinary();
                        $(this).attr('src', 'data:image/jpeg;base64,' + btoa(imageData)); 
                    });

                });

                $("#main a").click(function(event){
                    event.preventDefault();
                    var elems = ($(this).attr('href')).split("#");
                    var $path = $(zip.file(localStorage.selected + "/" + elems[0]).asText());
                    document.getElementById('main').innerHTML = "";
                    $('#main').append($path);
                });
            });

Now the click event at the bottom only works if I place it inside the code that creates the content, which shouldn't be the case and secondly it only works once, after I call it for the first time it refuses to work, any suggestions ?

Upvotes: 0

Views: 97

Answers (2)

Rik
Rik

Reputation: 736

I've had this problem before, have you tried using this?:

$("<element id>").on( 'click', this, function ()
{
      // Your code here
}

reference: http://api.jquery.com/on/

edit* Sorry did not see an answer before ( better explanation in answer above ) - but I'll keep mine for reference.

Upvotes: 2

jmar777
jmar777

Reputation: 39689

It sounds like you want to use event delegation instead. For example:

$(document).on('click', '#main a', function(event){
    event.preventDefault();
    var elems = ($(this).attr('href')).split("#");
    var $path = $(zip.file(localStorage.selected + "/" + elems[0]).asText());
    document.getElementById('main').innerHTML = "";
    $('#main').append($path);
});

The problem is that the $('#main a').click(...) approach requires that the #main a elements already be present on the page at the time that the click handler is bound.

Event delegation allows you to listen for a click event on the document (or any other element that will always be present), and see if that event originated from a #main a element. This allows you to add/remove elements on the fly without worrying about which ones have or haven't already had click handlers bound.

Upvotes: 4

Related Questions