How do i disable the click event in jquery

Question

I have implemented Fileupload drag and drop in jquery php using ajax posting.

Im using html input file tag with id upload_btn and a div with id total for drag and drop the files.

In order to remove the browse button on the screen and to use the div ( total ) as browse file. i have added these two lines on the top of the $(document).ready(function() {

  document.getElementById('total').addEventListener('click',function(){
  document.getElementById('fileToUpload').click();

After dropping the selected files in div( total ) listing all the file here. If any of the selected file exceeds the max file size, im displaying delete button for each file to remove the file from list. But after click on delete, selected file is removing success but as i have written the above mentioned two statements again the browse event is calling. How can i disable browse here in this situation.

Displaying all the files in div tag with id total as follows:

 $(upfiles).each(function(index, file) 
                    {
                        if(total_size > limit) // size limit comparision
                             display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' id='remove_"+int_loop+"' src='images/DeleteRed.png' />"
                        size = Math.round( file.size / 1024 );
                        if(size > 1024) 
                                size_display =  Math.round(size / 1024 * 100)/100 + ' mb'; // converted to mb
                        else
                                size_display = size + ' kb';
                        if(size > limit)
                        {
                            style_limitexceed = "style='background:#FFCCCC;border-radius:17px;height:30px;margin-top:6px;'";
                        }
                        else
                        {
                            style_limitexceed = "";
                        }
                        $('#total').append("<div id='div_selec"+int_loop+"' "+style_limitexceed+"><b>File Name :</b> "+file.name + "<b> Size:</b>" + size_display + display_removebutton + "</div>"+"" ); 
                        $("#remove_"+int_loop).click(function() {
                        if(confirm( "Do you want to delete file : "+ file.name+ "?" ) === true)
                        {

// here we need to remove the click event for **fileupload input tag**
                                var curr_id = this.id;
                                var id = curr_id.substr(7);
                                $("#div_selec"+id).empty();
                                upfiles.splice(index, 1)
                                $("#div_selec"+id).fadeOut('slow');
                                total_size = total_size - (file.size/1024);
                                if(total_size < limit)
                                {
                                    $("#total img:last-child").remove()
                                    $("#div_errorLog").fadeOut('slow');
                                }
                        }
                         });
                         int_loop++;
                    });

Hope you guys understand what my problem is.. waiting for your suggestions...!

edit :

what exactly need is, when total div has some content then browse event should not file, when clicking on remove display_removebutton or even total div

Answer 1

DEMO 1 : stopPropagation();

DEMO 2 : preventDefault();

---

You can stop the click event by

event.stopPropagation();

Or

event.preventDefault();

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

---

In your code.

document.getElementById('total').addEventListener('click',function(event){
  event.preventDefault();
  document.getElementById('fileToUpload').click();

});

Answer 2

JQUERY DOC

In addition to keeping any additional handlers on an element from being executed, this method also stops the bubbling by implicitly calling event.stopPropagation(). To simply prevent the event from bubbling to ancestor elements but allow other event handlers to execute on the same element, we can use event.stopPropagation() instead.

Use event.isImmediatePropagationStopped() to know whether this method was ever called (on that event object).

use the event.stopImmediatePropagation(); or event.stopPropagation() to stop the click event.

$('document').ready(function(){
       document.getElementById('total').addEventListener('click',function(event){
      document.getElementById('fileToUpload').click();
      event.stopImmediatePropagation(); (or) event.stopPropagation()
    });
  });

Answer 3

$("yourClass").click(function(e){
    e.preventDefault();
});

Answer 4

$(upfiles).each(function(index, file) 
                {
                    if(total_size > limit) // size limit comparision
                         display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' class='class_remove' id='remove_"+int_loop+"' src='images/DeleteRed.png' />"
                    size = Math.round( file.size / 1024 );
                    if(size > 1024) 
                            size_display =  Math.round(size / 1024 * 100)/100 + ' mb';     // converted to mb
                    else
                            size_display = size + ' kb';
                    if(size > limit)
                    {
                        style_limitexceed = "style='background:#FFCCCC;border-radius:17px;height:30px;margin-top:6px;'";
                    }
                    else
                    {
                        style_limitexceed = "";
                    }
                    $('#total').append("<div id='div_selec"+int_loop+"' "+style_limitexceed+"><b>File Name :</b> "+file.name + "<b> Size:</b>" + size_display + display_removebutton + "</div>"+"" ); 
                    $("#remove_"+int_loop).click(function(e) {
                    e.preventDefault();
                    if(confirm( "Do you want to delete file : "+ file.name+ "?" ) === true)
                    {

// here we need to remove the click event for **fileupload input tag**
                            var curr_id = this.id;
                            var id = curr_id.substr(7);
                            $("#div_selec"+id).empty();
                            upfiles.splice(index, 1)
                            $("#div_selec"+id).fadeOut('slow');
                            total_size = total_size - (file.size/1024);
                            if(total_size < limit)
                            {
                                $("#total img:last-child").remove()
                                $("#div_errorLog").fadeOut('slow');
                            }
                    }
                     });
                     int_loop++;
                });