grab multiple custom attr value on click

jquery multiple attribute selectors
jquery get data attribute value
jquery get attribute value
jquery get all attributes
jquery find
jquery select by name attribute
jquery attribute selector
jquery add attribute

I am trying to grab DataId, DataType, DataType this 3 custom attribute value as per button click. I already coded jquery like bellow but this not works at all. Any idea to fix it?

Table:

<table class="table table-bordered">
    <thead>
        <tr>
            <th>P Status</th>
            <th>P Sub Status</th>
            <th>T Lead</th>
            <th>P Status Order</th>
            <th>P Sub Status Order</th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>In Process - ASPN</td>
                <td>
                    Benefits Verification 
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" DataId="1" DataType="ProgramSubstatus" DataValue="Benefits Verification " style="float:right;margin-left:5px;">Edit</button>
            </td>
            <td>
                Jelsa Nichols
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" DataId="1" DataType="TeamLead" style="float:right;margin-left:5px;">Edit</button>
        </td>
        <td>0</td>
        <td>0</td>
    </tr>
    </tbody>
</table>

Jquery:

<script>

    $(document).ready(function () {

        $("button").on("click", "button", function () {
            var DataId = $(this).attr("DataId");
            var DataType = $(this).attr("DataType");
            var DataValue = $(this).attr("DataValue");

            console.log(DataId);
            console.log(DataType);
            console.log(DataType);
        });

    });

</script>

You have referenced the button selector twice -

$("button").on("click", "button", function () {})
//---^here-----------------^here---

This means that you are actually adding a click event handler to any button that is inside a button (a descendant) . Since you don't have a button within a button in your HTML, you're not able to catch that event being fired.

To solve this, you need to remove the inner reference to button. That will leave you with something that looks like this -

$("button").on("click", function () {})

In the documentation for the on function, it mentions that the 2nd parameter is a selector (emphasis was added) -

.on( events [, selector ] [, data ], handler )

selector Type: String A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.


In addition, I would recommend taking a look at the recommended way to use the data-* attributes. You don't need to access them as you do for a normal attribute. Please take a moment to read over this page of the docs - https://api.jquery.com/data/

As an example (lifted from the linked docs) -

<div  
   data-role="page" 
   data-last-value="43" 
   data-hidden="true" 
   data-options='{"name":"John"}'>
</div>

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

Multiple Attribute Selector [name=”value”][name2=”value2 , Description: Matches elements that match all of the specified attribute filters. version added: 1.0jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" ). The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. So to get the checked status of a checkbox, you should use:

change the button to document it will work fine

$(document).ready(function () {

    $(document).on("click", "button", function () {
        var DataId = $(this).attr("DataId");
        var DataType = $(this).attr("DataType");
        var DataValue = $(this).attr("DataValue");

        console.log(DataId);
        console.log(DataType);
        console.log(DataType);
    });

});

.attr(), The .attr() method gets the attribute value for only the first element in the Using jQuery's .attr() method to get the value of an element's attribute has two main The .attr() method is a convenient way to set the value of attributes—especially when setting multiple attributes or using values Basics · Custom · Fading · Sliding. For get an attribute’s value use the below syntax $(selector).attr(attribute); Using the below syntax you can set an attribute and values. $(selector).attr(attribute,value); To set an attribute and value by using a function using this below syntax. $(selector).attr(attribute,function(index,currentvalue)) ; To set multiple attributes and values using this below syntax.

Try this

 $("button").on("click", function () {
// do stuff
})

You just need the button selector once.

How to set values to custom attributes in Jquery, How to set values to html custom attributes using jquery. I am having an input tag <input type=”text” id=”id1″ value=”” data-parentID=””/>. refering the html input  To reffer to the clicked element, you use the $(this) instruction, so, the syntax to get the value of an attribute of a clicked HTML element is: $(element).click(function(){ var attrval = $(this).attr('attribute_name'); }); Now, here's some code, and examples. Get attribute value of an element by Class

Retrieving selections, attr('data-custom-attribute', data.customValue); return data.text; } }); // Retrieve custom attribute value of the first selected element $('#mySelect2'  The attr() method sets or returns attributes and values of the selected elements. When this method is used to return the attribute value, it returns the value of the FIRST matched element. When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.

Using data attributes, Reading the values of these attributes out in JavaScript is also very That said, though, for custom element-associated metadata, they are a  To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method. Using jQuery's .attr() method to get the value of an element's attribute has two main benefits: Convenience: It can be called directly on a jQuery object and chained to other jQuery methods.

HTML5 Custom Data Attributes (data-*), Attribute Value: The attribute value can be any string. As custom data attributes are valid HTML 5, they can be used in any browser that to be able to select elements based on the presence of — or indeed the Multiple scripts getting and setting a common data- attribute will Click here to cancel reply. The getAttribute () method returns the value of the attribute with the specified name, of an element. Tip: Use the getAttributeNode () method if you want to return the attribute as an Attr object. Browser Support. #N#getAttribute () element .getAttribute ( attributename) Parameter Values. Required. The name of the attribute you want to get the

Comments
  • Try $("button").click(function() {.. instead. Also you should probably use data- attributes to make it valid.
  • if you are binding to dynamically created buttons then you need to change the first selector (the one before the .on) to .table or document otherwise you can bind as h77 says
  • It would be great if you could add about custom data-* attribute to persists arbitrary data