使用replaceWith()后无法在jQuery中设置CSS并单击处理程序

时间:2014-12-01 08:14:59

标签: javascript jquery

我正在使用jQuery将正常的复选框替换为图像。我可以用图像替换复选框,但无法设置CSS并单击图像上的处理程序。

这是我的jQuery代码。



(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));
&#13;
&#13;
&#13;

任何人都可以让我知道怎么做吗?

您使用This链接进行测试

3 个答案:

答案 0 :(得分:3)

event delegation 用于动态创建的元素

$("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

答案 1 :(得分:2)

您正在尝试将css设置为字符串。使它像下面的jquery对象

(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

答案 2 :(得分:2)

您的cssclick方法未在被替换的元素上调用,但在新创建的HTML jQuery上正在从您的html字符串生成。

请改为尝试:

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