Hallo!

Ik ben op dit moment bezig met het maken van een website welke gebruikt maakt van jquery.

Nu zit ik met het volgende probleem, ik laadt data in via .load in een bepaalde div. Als ik nu op een knop klik in de geladen data dan werkt dit maar éénmaal.

Code:

        $('.content').on("click", function() {
            var data = $(this).attr("data-content");
            $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data, function() {
                    // Rank content
                    $('.rankPrev').on('click', function(e) {
                        var previous = $('.rankPrev').attr("data-previous");
                        $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data="+ data +"&page=" + previous);    
                    });
                    $('.rankNext').on('click', function(e) {
                        var next = $('.rankNext').attr("data-next");
                        $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data="+ data +"&page=" + next);
                    });
            });
            $('#contentBlock').show();
        });

Nu snap ik dat zoals dit nu gaat niet gaat werken alleen vraag ik mij af hoe ik er voor kan zorgen dat ik eigenlijk onbeperkt op een knop kan drukken en hij dus telkens de (Bijvoorbeeld: .rankNext) opvraagt.

Groetjes
Danny

Goedemorgen,

Als ik het goed begrijp dan wil je (nadat er op rankPrev en/of rankNext geklikt is wederom de #contentBlock content wijzigen? Ik zou het alsvolgt doen:

Code:

$('.content').on("click", function() {
    var data = $(this).attr("data-content");
    $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data, function() {
        initClickEvents();
    });
  
    $('#contentBlock').show();


    function initClickEvents() {
        // Rank content
        $('.rankPrev').on('click', function(e) {
            var previous = $('.rankPrev').attr("data-previous");
            $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data + "&page=" + previous);
              initClickEvents();
        });
        $('.rankNext').on('click', function(e) {
            var next = $('.rankNext').attr("data-next");
            $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data + "&page=" + next);
              initClickEvents();
        });


    }


});

Op het moment dat je de div content herlaad dan verdwijnen daarmee ook de .prev en .next button. Waarneer deze weer toegevoegd worden moet ook weer de .click event toegekend worden.

Een nog wat nettere code:

Code:

$('.content').on("click", function() {
    var data = $(this).attr("data-content");
    var action = $('.rankPrev').attr("data-current");


    loadData(data, action);






    function initClickEvents() {
        $('.rankPrev').on('click', function(e) {
            action = $('.rankPrev').attr("data-previous");
            loadData(data, action);
        });
        $('.rankNext').on('click', function(e) {
            action = $('.rankNext').attr("data-next");
            loadData(data, action);
        });


    }


    function loadData(data, action) {
        $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data + "&page=" + action, function() {
            initClickEvents();
            $('#contentBlock').show();
        });


    }


});

Waarbij je boven aan de huidige pagina ophaalt en deze stored in de "action"-variable.

Goedemorgen Tom,

Bedankt voor uw reactie, helaas werkt dit ook niet, op één of andere manier kan ik nog steeds maar éénmaal op de knop klikken.

Met vriendelijke groet,
Danny

Origineel gepost door Tom giesbergen

Goedemorgen,

Als ik het goed begrijp dan wil je (nadat er op rankPrev en/of rankNext geklikt is wederom de #contentBlock content wijzigen? Ik zou het alsvolgt doen:

Code:

$('.content').on("click", function() {
    var data = $(this).attr("data-content");
    $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data, function() {
        initClickEvents();
    });
  
    $('#contentBlock').show();


    function initClickEvents() {
        // Rank content
        $('.rankPrev').on('click', function(e) {
            var previous = $('.rankPrev').attr("data-previous");
            $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data + "&page=" + previous);
              initClickEvents();
        });
        $('.rankNext').on('click', function(e) {
            var next = $('.rankNext').attr("data-next");
            $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data + "&page=" + next);
              initClickEvents();
        });


    }


});

Op het moment dat je de div content herlaad dan verdwijnen daarmee ook de .prev en .next button. Waarneer deze weer toegevoegd worden moet ook weer de .click event toegekend worden.

De opslossing van Tom zou moeten werken, wel denk ik dat je in de on click nog even nog een selector moet toevoegen.
Dus .on('click', '#contentBlock', function ........

Inmiddels opgelost, bedankt voor jullie reacties!

Code:

		// Load and handle game content
		$('.content').on("click", function() {
		    var data = $(this).attr("data-content");
		    $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data, function() {
				initClickEvents();
		    });
		  
		    $('#contentBlock').show();
		    function initClickEvents() {
		        // Rank content
		        $('.rankPrev').on('click', function() {
		            var previous = $(this).attr("data-previous");
		            alert('prev');
		            $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data + "&page=" + previous, function() {
		          		initClickEvents();
		          	});
		        });
		        $('.rankNext').on('click', function() {
		        	alert('next');
		            var next = $(this).attr("data-next");
		            $('#contentBlock').load("/controller/lib/php_includes/loadcontent?data=" + data + "&page=" + next, function() {
		          		initClickEvents();
		          	});
		        });
		    }
		});

Met vriendelijke groet,
Danny