jQuery onclick dynamic binding issue

Question

I have a scenario where results returned from a query are populated into a list i.e <li> element the lists represent categories and sub categories from a database table.

The problem is I wanted to use jQuery onclick event to trigger a tick icon on the row which is clicked this tick icon represent the functionality for the user to proceed to the next step.

The issue is i cannot get the onclick event to work correctly on the row which is clicked. Any help would be appreciated below is the jQuery to trigger the event. here is the website link http://staging.expatexchange.ph/post-advert-step1 where the functionality is taking place

<script type="text/javascript">
 $(".finish").click(function() { 
var span = $(this).closest("li").find("#theimg"); 
jQuery(span).toggle('show');
var isVisible = $("#theimg" ).is( ":visible" );
var isHidden = $("#theimg" ).is( ":hidden" );

if(!isVisible)  {

$('.next_btn2').prop('disabled', false); //TO ENABLE
$(".next_btn2").css("opacity",1);
$(".next_btn2").css("background-color","#87b119");

}

else  {

$('.next_btn2').prop('disabled', true); //TO ENABLE
$(".next_btn2").css("opacity",0.5);
$(".next_btn2").css("background-color","#f25c27");

}

}); // end function
</script>

Learn Event Delegation

Satpal
– Satpal

2015-03-16 10:16:07 +00:00
Commented Mar 16, 2015 at 10:16 — Satpal
– Satpal, Commented Mar 16, 2015 at 10:16
provide a jsfiddle link

Rex Adrivan
– Rex Adrivan

2015-03-16 10:17:32 +00:00
Commented Mar 16, 2015 at 10:17 — Rex Adrivan
– Rex Adrivan, Commented Mar 16, 2015 at 10:17
Use jQuery live event and try.

stanze
– stanze

2015-03-16 10:18:02 +00:00
Commented Mar 16, 2015 at 10:18 — stanze
– stanze, Commented Mar 16, 2015 at 10:18

Community · Accepted Answer · 2017-05-23 11:58:38Z

1

Try this:

 $("body").on('click','.finish',function() { 
var span = $(this).closest("li").find("#theimg"); 
jQuery(span).toggle('show');
var isVisible = $("#theimg" ).is( ":visible" );
var isHidden = $("#theimg" ).is( ":hidden" );

if(!isVisible)  {

$('.next_btn2').prop('disabled', false); //TO ENABLE
$(".next_btn2").css("opacity",1);
$(".next_btn2").css("background-color","#87b119");

}

else  {

$('.next_btn2').prop('disabled', true); //TO ENABLE
$(".next_btn2").css("opacity",0.5);
$(".next_btn2").css("background-color","#f25c27");

}

Will work for dynamically added controls.

For more info - Source

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Mar 16, 2015 at 10:18

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery onclick dynamic binding issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related