[html/JS]Too much to explain

[jM2.me]

Okay so here is something I need help with.

Go here Maps
Download this text file http://work.p1x3.com/207.txt

Draw text file to drop area on a page.
A list should appear on left as well as markers on the map.

When you click on list item map will pan top marker.

Now you see for each list item I have edit/delete?
When those are clicked I need to do something.

Since list is dynamically appended js doesn't really wanna work here.

For example if I click delete on one item, it should be removed from list (easy .parent.parent.slideup/remove) and marker should be removed from map (markers are stored in var stops, i.e. stop[1].marker.setMap(null))

And I can't seem to make it work.

Feel free to look at source code to maybe get better understanding of what I am trying to do.

 

[holthelper]

i think its cause you dont see the extra ' within the brackets.

ex:

"''" vs ""

 

[jMerliN]

Your onclick attribute is:

<a href="#" onclick="'alert(2);'">delete</a>

'alert(2);'

is a statement that does nothing.

I wouldn't do it this way either. Just put a class on it and use jquery to assign handlers to the buttons after insert. Better yet, use a template.

And: https://developer.mozilla.org/en/Writing_Efficient_CSS

 

[jM2.me]

Your onclick attribute is:

<a href="#" onclick="'alert(2);'">delete</a>

'alert(2);'

is a statement that does nothing.

I wouldn't do it this way either. Just put a class on it and use jquery to assign handlers to the buttons after insert. Better yet, use a template.

And: https://developer.mozilla.org/en/Writing_Efficient_CSS

Okay so I assigned class dlt-btn for delete link.

		$('<div class="route-stop" id="rs' + stop.index + '">' +
		  '<div class="address">#' + stop.index + ": " + stop.house + " " + stop.street + '</div>' +
		  '<div class="actions"><a href="#" class="edt-btn">edit</a> | <a href="#" class="dlt-btn">delete</a></div>' +
		  '</div>').appendTo('.route-stops');

And added click method

	$('.dlt-btn').click(function() {
		console.log('delete clicked');
	});

Still nothing happens.

Perhaps there is a way to bind click even to edit&delete buttons before appending?

 

[jMerliN]

Okay so I assigned class dlt-btn for delete link.

		$('<div class="route-stop" id="rs' + stop.index + '">' +
		  '<div class="address">#' + stop.index + ": " + stop.house + " " + stop.street + '</div>' +
		  '<div class="actions"><a href="#" class="edt-btn">edit</a> | <a href="#" class="dlt-btn">delete</a></div>' +
		  '</div>').appendTo('.route-stops');

And added click method

	$('.dlt-btn').click(function() {
		console.log('delete clicked');
	});

Still nothing happens.

Perhaps there is a way to bind click even to edit&delete buttons before appending?

You have to add the click event after the element is added into the DOM.

 

[jM2.me]

You have to add the click event after the element is added into the DOM.

This is what I missed. Where exactly would that be?

 

[jMerliN]

This is what I missed. Where exactly would that be?

Right after you append it.

You need to get a reference to the anchor you just appended and add a click event to it.