CODEWITHSUNDEEP
javascripthtmljquery
xDw.Co
xDw.Co

Reputation: 41

jQuery the new appended data can not be captured by .on()

I am trying to get the value of an input box that been .append() to the HTML recently. The Input box does not exist normally. it get .append() on button click by a function.

The Value of the input should be captured and sent via jQuery Ajax to backend(php).

The Function which append the Input field:

function toggleOrder(){
    $(".orderContainer").append(`
        <div class="orderFilterBox">
            <input id="orderFilterInput" type="text" placeHolder="Enter IMEI">
        </div>
    `);
}

The Function where the input value captured and sent to backend

$(document).ready(function(){
    $("#orderFilterInput").on("change paste",function(){
        //DO THE MAGIC
        //...
    });
});

I belive that the problem being there that the code on the pageload where the input not exist. im not sure how to avoid that.

Also if you would suggsest a better question title to help other people, then please go for it

Upvotes: 1

Views: 79

Answers (2)

Qaseem Saleem
Qaseem Saleem

Reputation: 90

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated event handlers to attach event handlers.

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated event handlers to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

Here is the api reference: https://api.jquery.com/on/ , So as suggested by @daremachine you need to use the delegated event handler as:

$(document).on("change paste","#orderFilterInput", function(){
    //DO THE MAGIC
    //...
});

Upvotes: 1

daremachine
daremachine

Reputation: 2788

if you use .on you need focus on static element which exist in page load. orderFilterInput.on is bad if orderFilterInput does not exist.

You can try

$(document).on("ready", function(){
    $("body").on("change paste","#orderFilterInput", function(){
        //DO THE MAGIC
        //...
    });
});

or you can make your append button by jquery with event in your append function.

const btn = $('<input id="orderFilterInput" type="text" placeHolder="Enter IMEI">')
  .on('copy paste', function() { .. });

$container.append(btn);

Upvotes: 1

Related Questions