javascript - Two OnClick events overlap, causing the frist one to stop executing properly -

javascript - Two OnClick events overlap, causing the frist one to stop executing properly -

i trying fit new jquery toggle function within working code. basically, toggle function should show/hide below lying div form_fields_con on click event.

problem form_fields_con div contains ajax functionality triggered on click event.

toggle works when nil in form_fields_con div changing 1 time clicked, toggle function stops working.

this toggle function:

$(document).ready(function(){ $(".slidingdiv").hide(); $(".show_hide_search").show(); $('.show_hide_toggle').on('click', function(e){ e.preventdefault(); var self = this, sliding = $(this).closest('div').next('.slidingdiv').slidetoggle(function(){ $($(self).children()[0]).text(function(_,txt) { homecoming txt == "–" ? "+" : "–"; }); }); }); });

and ajax 1 contained in form_fields_con div :

function selectcombobox(fuelcombobox,fuelid,fuelcontainer,field_name){ var popupvar = jquery.noconflict(); popupvar('#'+fuelcombobox).css('display','none'); popupvar('#'+fuelid).css('display','block'); popupvar('#'+fuelcontainer).css('display','none'); }

html , css posted in jsfiddle here, avoid long post:

http://jsfiddle.net/bradg/v8hzlt7f/1/

note: reason cannot simulate error in jsfiddle, apologies that.

any feedback on how prevent 2 onclick functions collision appreciated!

you change/recreate dom elements holding onclick listener, simple approach around problem event-delegation: http://api.jquery.com/on/ (see se sec argument)

$('.slidingdiv').on('click', '.select_con_car', function() { alert('clicked'); });

http://jsfiddle.net/5m2mwd9h/

javascript jquery ajax onclick toggle