If $('#create-button-' + current_item)
is available on the ready state:
$('#create-button-' + current_item).on("click", function(event) {
//TODO
}
Should work find.
If $('#create-button-' + current_item)
is not available ready state, try:
$(document).on("click", '#create-button-' + current_item, function(event) {
//TODO
}
Another solution could be to give all the same things you can to bind the click
a class
and do something like:
$('.className').on("click", function(event) {
//TODO
}
or
$(document).on("click", '.className', function(event) {
//TODO
}
UPDATE:
Your JS is only binding the current_item
. So, if your current_item
equals 0
only the #create-button-0
will have the click
bound to it. I added what I think might help with your buttons. Let me know if it's off somewhere.
JS for buttons:
$('.btn-add').on("click", function(e) {
e.preventDefault();
var index = $(this).parent().find('.selection-value').val();
alert('add');
var data = {
current_it: index,
site_id: site_id,
project_id: project,
site_info: $('#site-to-' + index).serializeArray()
};
$.ajax({
type: 'post',
url: '{{ path("project_associate_site") }}',
data: data,
success: function(data) {
alert('success');
alert("index response " + index++);
for (var i = items; i > index; i--) {
$('#partial-' + i).hide();
alert("i #partial-" + i + ".hide()");
}
for (var j = 1; j < index; j++) {
$('#partial-' + j).hide();
alert("J partial-" + j + "hide()");
}
$('#partial-' + index).show();
$("#add-button-" + index).hide();
$('#create-button-' + index).hide();
alert("index response end" + index);
if (index > items) {
alert('>>');
window.location.href = "{{ path('project_show', { 'id': project }) }}";
}
}
});
});
$('.btn-create').on("click", function(e) {
event.preventDefault();
var index = $(this).parent().find('.selection-value').val();
alert('create');
var data = {
current_it: index,
site_info: $('#site-to-' + index).serializeArray()
};
$.ajax({
type: 'post',
url: '{{ path("site_create_processing") }}',
data: data,
success: function(data) {
alert('success');
alert("index response " + index++);
for (var i = items; i > index; i--) {
$('#partial-' + i).hide();
alert("i #partial-" + i + ".hide()");
}
for (var j = 1; j < index; j++) {
$('#partial-' + j).hide();
alert("J partial-" + j + "hide()");
}
$('#partial-' + index).show();
$("#add-button-" + index).hide();
$('#create-button-' + index).hide();
alert("index response end" + index);
if (index > items) {
alert('>>');
window.location.href = "{{ path('project_show', { 'id': project }) }}";
}
}
});
});
HTML PARSED:
<div id="content">
<div class="page-full-width cf">
<div class="content-module">
<div class="content-module-heading cf">
<ul class="temporary-button-showcase">
<li><a href="#" class="button round blue image-right ic-left-arrow text-upper">Back</a></li>
</ul>
</div>
<div class="content-module-main">
<div id="partial-0">
<h1>Partial Matches:</h1>
<form action="#pmatch" method="POST">
<div align="center">
<input type="submit" class="btn-add round blue ic-add" value="Add Site to Project">
<input type="submit" class="btn-create round blue ic-right-arrow" value="Create new Site">
<input type="hidden" class="selection-value" value="0" />
</div>
</form>
</div>
</div>
<div id="partial-1">
<h1>Partial Matches:</h1>
<form action="#pmatch" method="POST">
<div align="center">
<input type="submit" class="btn-add round blue ic-add" value="Add Site to Project">
<input type="submit" class="btn-create round blue ic-right-arrow" value="Create new Site">
<input type="hidden" class="selection-value" value="1" />
</div>
</form>
</div>
</div>
<div id="partial-2">
<h1>Partial Matches:</h1>
<form action="#pmatch" method="POST">
<div align="center">
<input type="submit" class="btn-add round blue ic-add" value="Add Site to Project">
<input type="submit" class="btn-create round blue ic-right-arrow" value="Create new Site">
<input type="hidden" class="selection-value" value="2" />
</div>
</form>
</div>
</div>
<div id="partial-3">
<h1>Partial Matches:</h1>
<form action="#pmatch" method="POST">
<div align="center">
<input type="submit" class="btn-add round blue ic-add" value="Add Site to Project">
<input type="submit" class="btn-create round blue ic-right-arrow" value="Create new Site">
<input type="hidden" class="selection-value" value="3" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
HTML BLOCK
<div id="content">
<div class="page-full-width cf">
<div class="content-module">
<div class="content-module-heading cf">
<ul class="temporary-button-showcase">
<li><a href="{{ path ('project') }}" class="button round blue image-right ic-left-arrow text-upper">Back</a></li>
</ul>
</div>
<div class="content-module-main">
{% if error == 1 %}
{# <div class="error-box" align="center"> {{error_message}} </div> #}
<div align="center">
<br>
<br>
<h2>{{error_message}}</h2>
</div>
{% else %}
{% if partial_results|length %}
{% set i = 0 %}
{% for p_result in partial_results %}
<div id="partial-{{loop.index}}">
{% set i = i + 1 %} {# site #}
<h1>Partial Matches:</h1>
<form action="#pmatch" method="POST" {{ form_enctype(form) }}>
<div align="center">
<input type="submit" value="Add Site to Project" class="btn-add round blue ic-add">
<input type="submit" value="Create new Site" class="btn-create round blue ic-right-arrow">
<input type="hidden" class="selection-value" value="{{i}}" />
</div>
</form>
</div>
{% endfor %}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}