Help with firing an event within a loop

[Eamonn]

This is an edit of a previous, poorly phrased, question

In TinyMCE, I type the following:

• Click here to watch video 1
• [popup]path/to/file1.mp4
• Click here to watch video 2
• [popup]path/to/file2.mp4

Using JQuery, I identify all the instances of the ‘[popup]’ hook. I take the remainder of that element as a variable (“path”). The previous element – the call to action – I turn into a link, and then use that link to trigger the launching of a Modal dialogue. The “path” variable is then fed to that dialogue, to do with as I need.

In this way, I can automatically create links that launch popups with my desired data in each, without having to do further coding.

The code below does work, but, as it all occurs within a .each loop, clicking on one link will fire ALL links, resulting in as many modal windows as have been created popping up. What I need is either a better function architecture, a way to pass the ‘path’ and ‘header’ vars from the initial function to another, or a way to fire the .click event ONCE per click (but remain viable afterward).

All help greatly appreciated.

Requires latest JQuery, JQuery UI.

$(document).ready(function(){



var num = 0;



//Find [popup] instances, increment the number

$("li:contains('[popup]')").each(function() {

var nextnumber = num++;



//add a general and a unique class to the list item containing the hook

//this leaves only the path to file in that list item.

$(this).addClass('popup' + ' ' + 'pop' + nextnumber);



//Split on the hook, and save remainder of text (the path to file) as the 'path' attr

var splitpath = $(this).text().split("[popup]");

$(this).attr("path", splitpath[1]);

//alert($(this).attr("path"));

var path = $(this).attr("path");



//Get the previous list item (the call to action), and give it general and unique classes also.

$thisArrow = $(this).parent().prev();

$thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);

var header = $thisArrow.text();



//Make the call to action an anchor link, with a general class identifier.

$thisArrow.wrapInner('');



//store path to poster as var, and hide the .popup li's

var popupBG = "../contents/css/images/white-nontrans.jpg";

$('li.popup').parent().hide();



var thisDialog = $('
').html(path).dialog({ autoOpen: false, title: header, modal: true });



$('.opener').click(function() {

thisDialog.dialog('open');

return false;

});



});

});

[Eamonn]

Managed to make it work myself. Posting, coz its a handy script IMO

$(document).ready(function(){



var num = 0;



//Find [popup] instances, increment the number

$("li:contains('[popup]')").each(function() {

var nextnumber = num++;



//add a general and a unique class to the list item containing the hook

//this leaves only the path to file in that list item.

$(this).addClass('popup' + ' ' + 'pop' + nextnumber);



//Split on the hook, and save remainder of text (the path to file) as the 'path' attr

var splitpath = $(this).text().split("[popup]");

$(this).attr("path", splitpath[1]);

var path = $(this).attr("path");

//alert($(this).attr("path"));



//Get the previous list item (the call to action), and give it general and unique classes also.

$thisArrow = $(this).parent().prev();

$thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);



//Make the call to action an anchor link, with a general class identifier.

$thisArrow.wrapInner('');



//store path to poster as var, and hide the .popup li's

var popupBG = "../contents/css/images/white-nontrans.jpg";

$('li.popup').parent().hide();

});



$('.opener').click(function() {

var Header = $(this).text();

var Path = $(this).attr("path");

var thisDialog = $('
').html("" + Path + "").dialog({ autoOpen: false, title: Header, modal: true });

thisDialog.dialog('open');

return false;

});

});

[Author]

Posts