0

I load a PHP code into a div:

$(".loader").click(function(e) {
    event.preventDefault(); 
    $("#content").load($(this).attr("href"));
});

in the target code there's some html5 stuff, i.e.:

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputFwFile">Upload</span>
    </div>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputFwFile" aria-describedby="inputFwFile">
        <label class="custom-file-label" for="inputFwFile">Choose file</label>
    </div>
</div>

and in my js file I want to catch some events:

$("#inputFwFile").change(function(e) {
    console.log(e.target.files);
});

Please note all the jQuery functions are wrapped into $("document").ready(function() ... statement. The code above works if the html snippet is placed into the main page (index.php). Instead, when loaded into its div content doesn't execute the change event anymore.

Perhaps it's because when the dom is ready the specific #intputFwFile doesn't exist yet? Any way to fix?

UPDATE

After reading the comment I tried this:

index.php file 

<div id="content">
</div>

index.js

$("document").ready(function() {
    $(".loader").click(function(e) {
        event.preventDefault(); 
        $("#content").load($(this).attr("href"));
    }); 
});

file.php

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputFwFile">Upload</span>
            </div>
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputFwFile" aria-describedby="inputFwFile">
                <label class="custom-file-label" for="inputFwFile">Choose file</label>
            </div>
        </div>

        <script type="text/javascript">
            $("document").ready(function() {
            $("#inputFwFile").change(function(e) {
                console.log(e.target.files);
            });
            });
        </script>

but still the change function is not executed even if it's in the same file of the requested element and the script runs when the document has loaded.

Why?

Mark
  • 4,338
  • 7
  • 58
  • 120
  • 1
    An event binding can only be created for existing elements. Elements that do not exist will not be found to attach the event binding to. By using a delegate event binding, you create an event binding on an existing parent element that dynamic content will belong to, and in the future when events originate from the dynamic content, they will bubble up to the parent element and be processed. – Taplar Oct 04 '19 at 14:53
  • I wasn't able to find the related question due to wrong search terms. Anyway, why if I put the js script directly inside the loaded html code (i.e. in the PHP file put into `#content`) it still doesn't work? The element should exist because it lives in the very same file along the js script. – Mark Oct 04 '19 at 14:59
  • 1
    I would need to see how you are doing that. If the script is included in the file with the html that will be loaded into the content, and it is either after the markup, or inside its own document ready, that should be valid. – Taplar Oct 04 '19 at 15:01
  • https://jsfiddle.net/z86rno7w/ An example of dynamic content with a script. It's not loaded with ajax, but the elements are created dynamically none the less. – Taplar Oct 04 '19 at 15:06
  • Question updated - thanks. – Mark Oct 04 '19 at 15:06
  • The only potential issue that you might be running into is that jQuery may be running a global eval with the scripts in the returned html. Which if it does that before the html is actually added to the page, the elements would not exist yet, and the document ready will fire immediately, due to the page already being loaded. Performing ajax requests does not put the page into a not loaded state, as far as javascript is concerned. – Taplar Oct 04 '19 at 15:09

0 Answers0