javascript - jQuery button click attr ('src' ) 返回 'Cannot read property ' on' of null'

Question

我正在尝试单击图像并捕获 url:

  $(".imageitemaddt").on("click", function() {
         imgitem = $(this).attr('src');
         alert(imgitem);
  }); 

  fabric.Object.prototype.transparentCorners = false;
  var $ = function(id){return document.getElementById(id)};

  fabric.Image.fromURL(imgitem, function(img) {
    var oImg = img.set({ left: 50, top: 100, angle: -15 }).scale(0.9);
    canvas.add(oImg).renderAll();
    canvas.setActiveObject(oImg);

     img.animate('left', 200, {
        onChange: canvas.renderAll.bind(canvas)
    });

  });

  $('grayscale').onclick = function() {
    applyFilter(0, this.checked && new f.Grayscale());
  };
  $('invert').onclick = function() {
    applyFilter(1, this.checked && new f.Invert());
  };
  $('remove-white').onclick = function () {
    applyFilter(2, this.checked && new f.RemoveWhite({
      threshold: $('remove-white-threshold').value,
      distance: $('remove-white-distance').value
    }));
  };

返回:

Uncaught TypeError: Cannot read property 'on' of null

---

解决方案

添加代码:

    function addtoo(img)
    {
    var nameim = img.src;

}

结果:

function addtoo(img)
{
var nameim = img.src;

  fabric.Image.fromURL(nameim, function(img) {
    var oImg = img.set({ left: 50, top: 100, angle: -15 }).scale(0.9);
    canvas.add(oImg).renderAll();
    canvas.setActiveObject(oImg);

     img.animate('left', 200, {
        onChange: canvas.renderAll.bind(canvas)
    });

  });

  }

在按钮中:

<img onclick="addtoo(this)" src="http://lorempixel.com/200/200"/>

https://jsfiddle.net/wvcsu6ho/6/

感谢您的帮助

Answer 1

除非绝对需要，否则不应覆盖 jQuery $ 选择器。你应该做的是在 noConflict 模式下使用 jQuery，如果你打算使用自己的 $ 选择器直接使用 jQuery 作为选择器的话。

如评论所述，如果ID不存在，它将始终返回null。

您最好使用 jQuery 选择器并将您的代码更新为:

if ($('#grayscale').length > 0) {
    $('#grayscale').on('click', function(e) {
        applyFilter(0, $(this).is(':checked') && new f.Grayscale());
    });
}