Merging two similar functions with .preventDefault () - javascript
I have two similar functions, an executable function and a delete function.
I want to merge them together, but I don't know how to merge them properly. I did it in the back for php, but for javascript somehow I couldn't get it to work.
I have jquery for these two buttons, say
I started with something like this, which works great and nothing bad, but I think it will be good to combine them as they are quite similar.
$('ol#textField').on('click', '.done-btn', doneButton);
$('ol#textField').on('click', '.delete-btn', deleteButton);
my functions deleteButton and doneButtion
function deleteButton(e){
e.preventDefault();
var $clicked = $(this);
var $cLI = $clicked.closest('li');
var todoText = $cLI.clone().children().remove().end().text();
var getID = $cLI.attr('id');
$.ajax({
// codes
}
});
}
function doneButton(e){
e.preventDefault();
var $clicked = $(this);
var $cLI = $clicked.closest('li');
var $cSpan = $clicked.closest('span');
var todoText = $cLI.clone().children().remove().end().text();
var getID = $cLI.attr('id');
$.ajax({
//codes
}
});
}
as they look like the same thing, but of course except for the ajax part that I didn't add as that would be too many codes and I don't think these codes pose any problem.
so I tried to combine something like this but doesn't work.
$('ol#textField').on('click', '.done-btn', doubleD('done'));
$('ol#textField').on('click', '.delete-btn', doubleD('delete'));
I tried to combine the function as follows. so if the parameter is executed the executed ajax will be called and the parameter will be removed and then delete will be called. I also want to add .preventDefault()
to the function but don't know how to do it.
function doubleD(action){
var $clicked = $(this);
var $cLI = $clicked.closest('li');
var todoText = $cLI.clone().children().remove().end().text();
var getID = $cLI.attr('id');
if(action == 'done'){
var $cSpan = $clicked.closest('span');
$.ajax({
// ajax for done
}
});
}
if(action == 'delete'){
$.ajax({
// ajax for delete
}
});
}
}
Can someone please give me your hand?
Thanks for your time and attention.
source to share
The problem is jQuery is not passing your argument to the handler. You have to add this as event data. Link: http://api.jquery.com/on/
Try the following:
$('ol#textField').on('click', '.done-btn', { action: 'done' }, doubleD);
$('ol#textField').on('click', '.delete-btn', { action: 'delete' }, doubleD);
Then you will access this:
function doubleD(evt){
var action = evt.data.action; // ACCESS THE PARAMETER HERE
var $clicked = $(this);
var $cLI = $clicked.closest('li');
var todoText = $cLI.clone().children().remove().end().text();
var getID = $cLI.attr('id');
if(action == 'done'){
var $cSpan = $clicked.closest('span');
$.ajax({
// ajax for done
}
});
}
if(action == 'delete'){
$.ajax({
// ajax for delete
}
});
}
}
I don't recommend doing it this way, but you can also write it like this:
$('ol#textField').on('click', '.done-btn', function () {
doubleD('done');
});
$('ol#textField').on('click', '.done-btn', function () {
doubleD('delete');
});
Then your original function doubleD
will work.
source to share
have you tried this
$('ol#textField').on('click', '.done-btn, .delete-btn', function(e){
e.preventDefault();
if( $(this).hasClass('done-btn') ){
}else{
}
});
IF not $(this)
you can use $(e.target)
I'm sure too, checking that the class tells you the button, no?
To separate the call, the main difference is the area in which it is called. When it is part of an event, the meaning $(this)
makes sense, if it is shared, then you lose that area. To overcome this, you can use an event object that contains target
events http://www.w3schools.com/jquery/event_target.asp , you should be mindful of the bubble though, but I think in this case (using input) you be fine, you can check $(e.target).is('input[type="button"]')
if you really want to be safe. Anyway:
$('ol#textField').on('click', '.done-btn, .delete-btn', doubleD);
function doubleD(e){
e.preventDefault();
if( $(e.target).hasClass('done-btn') ){
}else{
}
};
However, as I said, comments, separation of logic from the presentation (using e.data) is of great importance. This means that you don't rely on class names for your logic. So if in the last point you decide to change the class you don't need to update because it doesn't rely on your presentation (page layout and style).
I do know of another answer and plan to add it, but since I am not using it I needed a little work to make sure I remember it correctly. Another poster beat me up. This is ok, but I would like to point out this is actually the best method.
Also you can use the data-
http://www.w3schools.com/tags/att_global_data.asp attribute instead of a class like
<input type="button" class="done-btn" data-mode="done" />
And check it out by running
if( $(this).data('mode') == 'done' ){
...
Some might say that this is not the best way to do it, so this is the best way, but still use event.data
. Because while this is less about presentation, there is still a DOM element dependency element.
source to share