Clash Royale CLAN TAG#URR8PPP

How do I stop each function when I append with same class

HTML

<button id="add_div"> show more </button>


JQUERY

The more I add the class "show_div_value" whenever I click the show value the more the alert shows

var inc_numbers;

$("#add_div").click(function()
inc_numbers += 1;

$('parent_div').append('<button id="'+ inc_numbers +'" class="
show_div_value" value="inc_numbers"></button><button class="
show_button" id="'+ inc_numbers +'"> show value </button>');

//DISPLAYS 2 buttons with the same ID

);

$(".show_button").click(function()
var get_btn_id = $(this).attr('id');

$(".show_div_value").each(function()
var get_div_id = $(this).attr('id');

if(get_btn_id == get_div_id)
alert($(this).val());
return false; //I put this here but it doesn't seem to work out

);
);


#add_div

1 Answer
1

You should update your code as follows:

var inc_numbers = 0;

$('#add_div').click(function()
inc_numbers += 1;

$('#parent_div').append( // Not $('parent_id').append()!
'<button data-id="' + inc_numbers + '" class="show_div_value" value="' + inc_numbers + '" style="display: none;"></button>' +
'<button class="show_button" id="' + inc_numbers + '"> show value </button>'
);
// Same id to two elements is invalid in HTML, so I use data- attributes.
// This will do the jQuery code very simple,
// beacuse I just need to select the .show_div_value with data-id equals to the id of the clicked button
);

$('#parent_div').on('click', '.show_button', function()
// Don't attach the listener directly to the button, because the button doesn't exist when you atatch the listener.
// Because of this, you should use delegated event. See https://learn.jquery.com/events/event-delegation/.

var div = $('.show_div_value[data-id=' + $(this).attr('id') + ']');
console.log(div.val());
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add_div"> show more </button>
<div id="parent_div"></div>

[<attribute>="<value>"]

<attribute>

<value>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.