unable to set CSS and click handler in jQuery after use of replaceWith()

Question

I am using jQuery to replace normal checkbox with image. I am able to replace checkbox with image but unable to set CSS and click handler on image.

This is my jQuery code.

(function ($) {
    $.fn.SetOnOff = function (onImage,offImage) {
         debugger;
         var html = '<img style="width: 80px; height: 30px" src="'+offImage +'"/>';
                $(this).replaceWith(html);
         $(html).css('cursor','pointer');
          $(html).click(function(){
             var fileName = $(this).attr('src');
                if (fileName == onImage)
                    $(this).attr('src', offImage);
                else
                    $(this).attr('src', onImage);
         });
                
        return  $(this);
    };
} (jQuery));

can anybody let me know how to do this?

you use This link to test it

Balachandran · Answer 1 · 2014-12-01T08:24:03.493

3

use event delegation for dynamically created element

$("button").click(function () {
    var v = "<div>" + $(this).text() + "</div>";
    $(this).replaceWith(v);
    $(v).css('cursor', 'pointer');
});

$(document).on("click", "div", function () {
    alert($(this).text());
});

DEMO

edited Dec 01 '14 at 08:24

answered Dec 01 '14 at 08:19

Balachandran

9,567
1
16
26

score 2 · Accepted Answer · answered Dec 01 '14 at 08:20

2

Your css and click methods are not being called on the replaced element but on a newly-created HTML jQuery is generating from your html string.

Try this instead:

 var $v = $("<div>" + $(this).text() + "</div>");
 $(this).replaceWith($v);
 $v.css('cursor', 'pointer');
 $v.click(function () {
     alert('a');
 });

answered Dec 01 '14 at 08:20

haim770

48,394
7
105
133

I found this code works for me. Thanks haim770 – Manish Dec 01 '14 at 08:30

score 1 · Answer 3 · answered Dec 01 '14 at 08:17

you are trying to set css to string. make it jquery object just like below

(function ($) {
$.fn.SetOnOff = function (onImage,offImage) {
     debugger;
     var html = $('<img style="width: 80px; height: 30px" src="'+offImage +'"/>');
            $(this).replaceWith(html);
     $(html).css('cursor','pointer');
      $(html).click(function(){
         var fileName = $(this).attr('src');
            if (fileName == onImage)
                $(this).attr('src', offImage);
            else
                $(this).attr('src', onImage);
     });

    return  $(this);
};
} (jQuery));

Demo

unable to set CSS and click handler in jQuery after use of replaceWith()

3 Answers3