JQuery proxy on click function

2019-09-06 21:20发布

问题:

Here is the scenario. I want to customize the built in plugin. Here is the scenario of default functionality.

Current Scenario by default

There are list if thumbnail images and when I click on an image then it just gets inserted in the area. Please see the default code below.

Code by default

var img = $('<img src="' + val.thumb + '" />');
$(img).click($.proxy(this.imageThumbClick, this));
imageThumbClick: function (e) {
        var img = '<img id="image-marker" src="' + $(e.target).attr('rel') + '" alt="' + $(e.target).attr('title') + '" />';
        var parent = this.getParent();
        if (this.opts.paragraphy && $(parent).closest('li').size() == 0) img = '<p>' + img + '</p>';
        this.imageInsert(img, true); // insert an image
    }

My requirement

I want if I click on any thumbnail then it should mark selected and then if i click on button "insert image" then the selected image should insert. but my code is not working. Can you please help me to achieve my goal

My customized code

var img = $('<img src="' + val.thumb + '" />');
var thisImg;
 $(img).click(function () {
     $('img').removeClass('checked');
     $(this).addClass('checked');
     thisImg = $(this);
 });
 $('#insert-btn').click(function () {
     thisImg.imageThumbClick();
 });
imageThumbClick: function (e) {
    var img = '<img id="image-marker" src="' + $(e.target).attr('rel') + '" alt="' + $(e.target).attr('title') + '" />';
    var parent = this.getParent();
    if (this.opts.paragraphy && $(parent).closest('li').size() == 0) img = '<p>' + img + '</p>';
    this.imageInsert(img, true); // insert an image
}