0

Good day...

I have multiple links as below:

<li><a href="#" id="mmSaveForm" class="itemDisabled noTxtSelect1">Save</a></li>
<li><a href="#" id="mmSaveAs" class="itemDisabled noTxtSelect1">Save As</a></li>
<li><a href="#" id="mmSaveExit" class="itemDisabled noTxtSelect1">Save And Exit</a></li>

I wanna know which link has been clicked I tried something like this:

if ($("#mmSaveForm").click() == "true") {
    //do something
}
else if ($("mmSaveAs").click() == "true") {
    //Do something
}
else if ($("#mmSaveExit").click() == "true") {
    //Do something
}

I tried these links, questions & answers but they are not helping:

How can I get the button that caused the submit from the form submit event?

jQuery: how to get which button was clicked upon form submission?

how to detect which button is clicked using jQuery

jQuery - how to determine which link was clicked

I've been trying this the whole night, please help... Thank you in advanced...

Community
  • 1
  • 1
Norris
  • 2,228
  • 3
  • 15
  • 16

9 Answers9

4

Why don't you target the class instead, grab the id and then use a switch statement.

$('.itemDisabled').on('click', function () {
  var id = this.id;
  switch(id) {
    case 'mmSaveForm':
      // code
      break;
    case 'mmSaveAs':
      // code
      break;
    case 'mmSaveExit':
      // code
      break;
  }
});
Andy
  • 61,948
  • 13
  • 68
  • 95
  • I prefer this method, as I find a lot of case statements are easier to read than a bunch of `if()`'s. – ʰᵈˑ Jul 24 '14 at 09:37
  • Me too. The other better way, if you have loads of cases, is to use an object to store your methods and just reference the keys as needed: e.g. `obj.mmSaveForm();`. – Andy Jul 24 '14 at 09:39
  • This method is faster due to the use of 'this' from vanilla JS. – Mysteryos Jul 24 '14 at 09:41
2

Try to use .is(selector) to identify the element which has been clicked,

$('a.noTxtSelect1').click(function(e){
   e.preventDefault();  
   if($(this).is("#mmSaveForm")){

   } else if($(this).is("#mmSaveAs")) {

   } else if($(this).is("#mmSaveExit")) {

   }
});
Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
1

If your links have id attributes all starting with 'mm' you could use:

$('a[id^=mm]').on('click', function(){
   console.log(this.id); 
});

Or on one or more classes:

$('a.itemDisabled').on('click', function(){

-or-

$('a.itemDisabled.noTxtSelect1').on('click', function(){

In the click event, you can use switch to determine the link clicked, which you can fetch using this or $(this)

e.g.:

Demo Fiddle

$('a[id^=mm]').on('click', function () {
    switch (this.id) {
        case "mmSaveForm":
            alert(this.id);
            break;
        case "mmSaveAs":
            alert(this.id);
            break;
        case "mmSaveExit":
            alert(this.id);
            break;

    }
});
SW4
  • 69,876
  • 20
  • 132
  • 137
0

Use common class like a itemDisabled for click event and get id ,

$(".itemDisabled").click(function (e) {
     e.preventDefault();
     var id = this.id;
     if (id === "mmSaveForm") {

     } else if (id === "mmSaveExit") {

     } else {}

 });
Balachandran
  • 9,567
  • 1
  • 16
  • 26
0

You can use the [attr^="value"] ["starts with"] selector:

$('[id^="mmSave"]').click(function(event){
  event.preventDefault();
  var action = this.id;
  // do your business
});
moonwave99
  • 21,957
  • 3
  • 43
  • 64
0

You're thinking about this the wrong way. In your

$(document).ready(function() {})

you register for click events. So something like 

$(document).ready(function() {

    $("#mmSaveForm").click(function() {
        // handle the click
    });

});
CharlesA
  • 4,260
  • 2
  • 25
  • 31
0

may be you can try this 

$(function(){
        $('.linkclass').click(function(){
           var link_text = $(this).text();
           alert('the clicked link text is '+ link_text);
    });
 });
Shah Rukh
  • 3,046
  • 2
  • 19
  • 27
0

No need jquery please look this code

 <!DOCTYPE html >
<html >
<head>
<script>
function clickbtn(t)
{
    alert(t.id);
    /*if(t.id==...) 
    {
        dosomething();
    }
    else
    {
        dootherthing();
    }
    */
}
</script>
</head>
<ul>
<li><a href="#" onclick="clickbtn(this)" id="mmSaveForm" class="itemDisabled noTxtSelect1">Save</a></li>
<li><a href="#" onclick="clickbtn(this)" id="mmSaveAs" class="itemDisabled noTxtSelect1">Save As</a></li>
<li><a href="#"  onclick="clickbtn(this)" id="mmSaveExit" class="itemDisabled noTxtSelect1">Save And Exit</a></li>
</ul>

<body>
</body>
</html>

It work ok . Hope this help!

tuan huynh
  • 727
  • 5
  • 13
0

This is my html page (Django template):

<div class="col">
    {% for blog in blogs %}
    <div class="post">
        <h3><a href="{% url 'blog:detail' pk=blog.pk %}">{{ blog.title }}</a></h3>
        <div class="date">
            <p>Created: {{blog.date_created|date:'d M Y'}}</p>
        </div>
        <p>{{ blog.brief|safe }}</p>  

        <ul class="nav justify-content-end">
            <li class="nav-item">
              <a class="nav-link active" href="{% url 'blog:edit' pk=blog.pk %}">Edit</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="publish" href="{{blog.pk}}">Publish</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-danger" id="remove" href="{{blog.pk}}">Remove</a>
            </li>
          </ul>
        <br>
    </div>
    {% endfor %}
</div>

In my javascript file, this is what have and it works.

$(document).ready(function() {

console.log("document is ready!!!")

$('#id_bloglist').on("click", 'a#publish,a#remove', function(e) {

    e.preventDefault()

    var pk = $(this).attr("href")

    if ($(this)[0].id == 'remove'){
        console.log("remove link clicked, calling deleteBlog with pk = " + pk)
    }
    else if ($(this)[0].id == 'publish'){
        console.log("publish link clicked, calling publishBlog with pk = " + pk)
    }

    return false;
});

});

Rhonald
  • 363
  • 5
  • 18