jquery form ID or name

https://stackoverflow.com/questions/3051501/html-forms-are-name-and-id-required




name is used by the server-side, this is necessary if you plan to process the field. id is only so label elements, when clicked and accessed by screen-readers, can trigger/invoke the form controls ( inputs, selects ).

jquery data 使用方法

jQuery.data()

Store arbitrary data associated with the specified element and/or return the value that was set.

ref:

https://api.jquery.com/jquery.data/

Accessible Rich Internet Applications

what is role:

The role attribute is necessary to support Accessible Rich Internet Applications (WAI-ARIA) [WAI-ARIA] to define roles in XML-based languages, when the languages do not define their own role attribute. Although this is the reason the Role Attribute is published by the Protocols and Formats Working Group, the attribute has more general use cases as well.

Question:

what-is-the-purpose-of-the-role-attribute-in-html


Ref:
https://www.w3.org/TR/role-attribute/
https://www.w3.org/TR/html-aria/

Bootstrap modal

1. From

The Modal Plugin Classes

Class	Description
.modal	Creates a modal
.modal-content	Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer.
.modal-header	Defines the style for the header of the modal
.modal-body	Defines the style for the body of the modal
.modal-footer	Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left|center
.modal-sm	Specifies a small modal
.modal-lg	Specifies a large modal
.fade	Adds an animation/transition effect which fades the modal in and out

2.   綁定事件

開啟事件的處理

    $('.form_modal').on('show.bs.modal', function(e) {
        // DO Something      
       $('#myInput').trigger('focus')
});  

關閉事件的處理

    $('.form_modal').on('hide.bs.modal', function(e) {
    
    });  

jquery event target

1.  Explain
指向最初觸發事件的 DOM 物件。與 event.currentTarget 屬性不同的是，event.currentTarget 屬性總會指向目前於冒泡或捕捉階段正在處理該事件之事件處理器所註冊的 DOM 物件，而 event.target 屬性則是永遠指向觸發事件的 DOM 物件。


2. exampele:

function edit(event) {
    var currentRow = $(event.target).closest("tr");
}



ref:
https://developer.mozilla.org/zh-TW/docs/Web/API/Event/target
https://www.w3schools.com/jsref/event_target.asp

jquery table select td using closest function

1. Problem
How to select the id in the table if you using the button



2. Solution:

Using the closest() function

3.  Example:

4.  From https://api.jquery.com/closest/

.closest()	.parents()
Begins with the current element	Begins with the parent element
Travels up the DOM tree until it finds a match for the supplied selector	Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied
The returned jQuery object contains zero or one element for each element in the original set, in document order	The returned jQuery object contains zero or more elements for each element in the original set, in reverse document order

5.Good example
https://codepedia.info/jquery-get-table-cell-td-value-div/


ref:
https://www.w3schools.com/jquery/traversing_closest.asp

Jquery on and bind different

自從 query 1.7 之後

參考：
a http://api.jquery.com/on/
b. appleboy
c. make_a_clickable_row_with_a_dynamic_generated


1.
如果只是單純只是用 click bind event 的話，那只要新增的元件就無法作用

2. 改成

$(document).on('click', '#edit-dialog', function(event){

    console.log("Hello");

});