.html() in ajax doesn't work

Question

I want to make like and unlike to book i make it but this code executes only one time without refresh pages

JAVASCRIPT

<script type="text/javascript">
    $(document).ready(function() {
        $("#wish").click(function() {
            var userId = "<?php echo $this->session->userdata("user"); ?>";
            var bookId = "<?php echo $book->bo_id; ?>";

            var sendData = {"user_id": userId, "book_id": bookId , "flag": this.title};
            $.ajax({
                url: "<?= base_url(); ?>bookstore/book/add_read_wish/",
                type: "POST",
                data: sendData,

                success: function(data) {

                }
            });
            if ($(this).html() != "<img src='<?= base_url() ?>global/site/images/books.website_icon-16-presed.png' alt='' />") {
                    $(this).attr('id', 'delete_wish');
                    $(this).attr('title', 'حذف الكتاب من قائمة الأمنيات');
                    $(this).replaceWith("<a id='delete_wish' class='rss' href='javascript:void(0)' title='حذف الكتاب من قائمة الأمنيات'><img src='<?= base_url() ?>global/site/images/books.website_icon-16-presed.png' alt='' /></a>");
                    //this.title = "حذف الكتاب من قائمة الأمنيات";

                }
        });


        $("#delete_wish").click(function() {
            var userId = "<?php echo $this->session->userdata("user"); ?>";
            var bookId = "<?php echo $book->bo_id; ?>";

                 var sendData = {"user_id": userId, "book_id": bookId , "flag": this.title};
            $.ajax({
                url: "<?= base_url(); ?>bookstore/book/delete_read_wish/",
                type: "POST",
                data: sendData,

                success: function(data) {

                }
            });
            if ($(this).html() != "<img src='<?= base_url() ?>global/site/images/books.website_icon-16.png' alt='' />") {
                    $(this).attr('id', 'wish');
                    $(this).attr('title', 'أنوى قراءة هذا الكتاب');
                    $(this).replaceWith(" <a id='wish' class='rss' href='javascript:void(0)' title='أنوي قراءة هذا الكتاب'><img src='<?= base_url() ?>global/site/images/books.website_icon-16.png' alt='' /></a>");
                    //this.title = "حذف الكتاب من قائمة الأمنيات";


                }
        });


    });
</script>

HTML

<?php if ($book_wish == NULL) { ?>
                            <a id="wish" class="rss" href="javascript:void(0)" title="أنوي قراءة هذا الكتاب">
                                <img src="<?= base_url() ?>global/site/images/books.website_icon-16.png" alt="" />
                            </a>
                        <?php } else { ?>
                            <!--<div  id="wish">-->
                            <a id="delete_wish" class="rss" href="javascript:void(0)" title="حذف الكتاب من قائمة الأمنيات">
                                <img src="<?= base_url() ?>global/site/images/books.website_icon-16-presed.png" alt="" />
                            </a>
                            <!--</div>-->
                        <?php
                        }?>

Answer 1

You are setting up click handler for #delete_wish on page load. But later you are creating #delete_wish links dynamically in $("#wish").click . Dynamically created #delete_wish links are not binded to this handler. You need to re-bind every dynamically created link.

(Assuming you separated your #delete_wish click handler method as handlerFunction)

In your $("#wish").click after ajax request:

if ($(this).html() != "<img src='<?= base_url() ?>global/site/images/books.website_icon-16-presed.png' alt='' />") {
  $(this).attr('id', 'delete_wish');
  $(this).attr('title', 'حذف الكتاب من قائمة الأمنيات');
  $(this).replaceWith("<a id='delete_wish' class='rss' href='javascript:void(0)' title='حذف الكتاب من قائمة الأمنيات'><img src='<?= base_url() ?>global/site/images/books.website_icon-16-presed.png' alt='' /></a>");
  //bind a click handler for newly created link:
  $('#delete_wish').click(handlerFunction);
}

Answer 2

The problem is the replaceWith JQuery function. It basically replace your original element with the 'click' binding with new elements.

$(this).replaceWith(....)

Once replaced, the new element does not listen to the click event.

I suggest wrapping your two s in , move the id of a the to the like:

<span id="wish" ><a id="wish" class="rss" ...>..</a> </span>

Then you don't need to change the javascript code (note, the id="wish" need to be removed in the replacing )