Hassaan Hassaan - 6 months ago 17
Javascript Question

jquery on click no working on EDIT button

I'm developing CMS. Issue is that

jquery
on click no working on EDIT Button. Code seems fine to me but I did not understand why it is not working. It is working on Add Button.

JS

<script>

var loading_message = "<div class='row'><div class='col-md-4 col-md-offset-4'><img src='<?=site_url()?>assets/_admin/images/loading.gif'/></div></div>";

function list()
{
$('#main_contents').html(loading_message);
var form_data = {
ajax : '1',
actioncall : 'show_all',
};
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#main_contents').html(data);
}
});
}

function add()
{
$('#right_block').html(loading_message);
var form_data = {
ajax : '1',
actioncall : 'add_form',
};
$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#right_block').html(data);
}
});
}

$(document).ready(function()
{
list();
add();

$('#addbanner').on('click',function()
{
add();
});

$('.edit').on('click',function()
{
$('#right_block').html(loading_message);
var id = this.id;
alert(id);
var form_data = {
ajax : '1',
actioncall : 'edit',
id : id,
};

$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data){
$('#right_block').html(data);
}
});
});

$('.delete').on('click',function(){
var id = this.id;
alert(id);
});

$(document).on('submit','form#process-data',function(e) {

e.preventDefault();

var form_data = {
ajax : '1',
link_togo : $('#link_togo').val(),
title : $('#title').val(),
description : $('#description').val(),
keyword : $('#keyword').val(),
placement : $('#placement').val(),
location : $('#location').val(),
status : $('#switch-size').val(),//#default
actioncall : 'add'
};

//alert(JSON.stringify(form_data));

$.ajax({
url : "<?=site_url()?>itadmin/ajaxBanners",
type : 'POST',
data : form_data,
success : function(data)
{
/*setTimeout(function ()
{
$('.img_pre').attr('src',data);
$('.delete_btn').show();
}, 1000);*/
$("#right_block").html(data);
list();
}
});

});

});
</script>


HTML

<div class="banner-row1">
<div class="banner-row-pic">
<img src="http://localhost/cms-basic/assets/_admin/images/pic.png" alt="pic1" />
</div>
<div class="banner-row-text">
<h2>Latest News</h2>
<p>Every news is important</p>
<p class="text-muted">
<small>
Keyword: news<br />
Placement: others<br />
Location: Homepage<br />
Link: <a href="http://pakhotline.com">http://pakhotline.com</a>
</small>
</p>
</div>
<div class="banner-row-edit">
<a class="edit" id="2" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/edit.png" />
</a>
<a class="delete" id="2" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/delet.png" />
</a>
</div>
<div class="clr"></div>
</div>


<div class="banner-row1">
<div class="banner-row-pic">
<img src="http://localhost/cms-basic/assets/_admin/images/pic.png" alt="pic1" />
</div>
<div class="banner-row-text">
<h2>title</h2>
<p>description</p>
<p class="text-muted">
<small>
Keyword: keyword<br />
Placement: Bottom<br />
Location: static_page<br />
Link: <a href="link">link</a>
</small>
</p>
</div>
<div class="banner-row-edit">
<a class="edit" id="1" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/edit.png" />
</a>
<a class="delete" id="1" href="javascript:void(0);">
<img src="http://localhost/cms-basic/assets/_admin/images/delet.png" />
</a>
</div>
<div class="clr"></div>
</div>


Note: - I'm using jQuery
1.11.3

Answer

The issue is happening because of same ids.

Replace

$('.edit').on('click',function()

with

$(document).on('click', '.edit', function()
Comments