jQuery的点击没有在编辑按钮上的工作

Question

我正在开发CMS。 问题是单击jquery时无法在“编辑”按钮上使用。 代码对我来说似乎很好，但是我不明白为什么它不起作用。 它正在“添加”按钮上。

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>

注意 ：-我正在使用jQuery 1.11.3

Answer 1

您只能使用一次ID，因为它必须是唯一的 。

Answer 2

由于相同的ID，因此发生了问题。

更换

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

与

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