CODEWITHSUNDEEP
javascriptjquery
chuckd
chuckd

Reputation: 14610

OnClick not working with my element

I create an anchor tag and then a click event handler, but the event is not triggering. I think the jQuery syntax is incorrect?

var b = '<a class="dz-remove removeAttachment">Remove</a>';
var someOtherElement = $(dropZoneElement).find(".dz-file-preview")[0];
$(someOtherElement).append(b);
$(b).on('click', function() {
  dropone.removeAllFiles();
})

Upvotes: 0

Views: 87

Answers (7)

War10ck
War10ck

Reputation: 12508

You're adding a lot of extra work for yourself in generating the elements like that. In addition, there are a few problems with the way that that code is executing. First, you're creating two independent anchor tags, here .append(b); and here $(b). Secondly, you're attaching your event handler to the second anchor tag that you create but you're not inserting that tag into the DOM.

Thankfully, we can fix this. In referencing the jQuery Docs, you'll see that the vast majority of functions return jQuery. This is great because it allows us to chain together commands and reduce the complexity of the code. Try the following:

$('<a />', { "class": "dz-remove removeAttachment", text: "Remove" })
    .appendTo($(dropZoneElement).find(".dz-file-preview"))
    .on('click', function () {
        dropone.removeAllFiles();
    });

DEMO:

// Document Ready
$(function () {
    $('<a />', { "class": "dz-remove removeAttachment", text: "Remove" })
        .appendTo($('#dropzoneElement').find(".dz-file-preview"))
        .on('click', function () {
   	        alert("I'm chained!");
        });
});
a {
  display: block;
  border: 1px solid red;
  color: red;
  padding: 5px 7px;
  width: 70px;
  text-align: center;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
a:hover {
  background: red;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropzoneElement">
  <div class="dz-file-preview"></div>
</div>

Upvotes: 0

Rajpal Singh
Rajpal Singh

Reputation: 311

You can achieve easily with replace

$(b).on('click', function() {
  dropone.removeAllFiles();
});

with

$('.dz-remove').on('click', function() {
  // your code....
});

and you can see your all code is working well :)

Upvotes: 0

printfmyname
printfmyname

Reputation: 971

Problem is that your var b is a string. What you need to do is to create a dom element and add the event listener to that element.

Change var b to

var b = $.parseHTML('<a class="dz-remove removeAttachment">Remove</a>'); // $.parseHTML is a jQuery method to create HTML from a string

which creates a HTML element and when you add on click event to var b it will work properly.

Example: https://jsfiddle.net/5nx6u18n/

Upvotes: 0

Nikolay Ermakov
Nikolay Ermakov

Reputation: 5061

Your problem is that you actually create two independent anchor elements: here $(someOtherElement).append(b) and here $(b)..

Use code below. I presume you have dropone and dropZoneElement defined somewhere above this snippet.

var $b = $('<a class="dz-remove removeAttachment">Remove</a>');
$b.click( function() { dropone.removeAllFiles(); });
$(dropZoneElement).find(".dz-file-preview:first").append($b);

Upvotes: 2

Mustapha Larhrouch
Mustapha Larhrouch

Reputation: 3403

try this:

var b = '<a class="dz-remove removeAttachment">Remove</a>';
var someOtherElement = $(dropZoneElement).find(".dz-file-preview")[0];
$(someOtherElement).append(b);
$(someOtherElement).find('a').on('click', function() {
  dropone.removeAllFiles();
})

Upvotes: 0

Mahmoud Farahat
Mahmoud Farahat

Reputation: 5485

Var b is still a string not a Dom element, you have to select the inserted element for example by class, then assign click event to it.

Upvotes: 0

Mojtaba
Mojtaba

Reputation: 5002

You can't bind an event to a string.

You should bind it to the DOM elements. As you are adding the DOM element after loading the entire document, using 'delegate' helps you.

This should work:

var b = '<a class="dz-remove removeAttachment">Remove</a>';
$(someOtherElement).append(b);
$(someOtherElement).delegate('.removeAttachment', 'click', function() {
  dropone.removeAllFiles();
})

Upvotes: 1

Related Questions