Click handler not working

Question

I've got a few buttons with the class PhotoUploadSubmit, and when a button is clicked, a custom click handler is used to look at sibling elements, etc. The click handler doesn't work, debugger never goes off, breakpoints are not hit, and I'm totally baffled.

<div class="formDataContext">
    <input type="file" name="ImageData" style="display:none" />
    <button class="PhotoUploadSubmit"><i class="fa fa-camera fa-5x"></i></button>
</div>

<script type="text/javascript">

$(function () {
    $(".PhotoUploadSubmit").on("click", function () {
        debugger;
        var currentFormDataContext = $(this).closest(".formDataContext");
        console.log(currentFormDataContext);
        var FileInput = currentFormDataContext.find("input:file")[0];
        console.log(FileInput);
        $(FileInput).click();
    });

    $("input:file").change(function () {
        var currentFormDataContext = $(this).closest(".formDataContext");
        uploadImage(currentFormDataContext);
    });
});

</script>

In terms of what I've tried, I've tried putting the click handler outside of document.ready, I've tried using the debugger; keyword, and I've tried setting breakpoints. There's no console errors.

@AlienWebguy Yeah, jQuery is included and everything else is working fine. — alex, Dec 08 '14 at 17:08
@FlorianF. The buttons are dynamically added to the page via Knockout.JS — alex, Dec 08 '14 at 17:08
`$(".formDataContext").on("click",".PhotoUploadSubmit" function () { });` — Dhaval Marthak, Dec 08 '14 at 17:09
@alex Then void's answer is the right one, you need to use delegates, ask him for more explanation :) — Florian F., Dec 08 '14 at 17:10

MH2K9 · Accepted Answer · 2014-12-09T03:31:06.167

3

Since the buttons are dynamically added so you can delegate. Example:

$("body").on("click", '.PhotoUploadSubmit', function () {
    debugger;
    var currentFormDataContext = $(this).closest(".formDataContext");
    console.log(currentFormDataContext);
    var FileInput = currentFormDataContext.find("input:file")[0];
    console.log(FileInput);
    $(FileInput).click();
});

edited Dec 09 '14 at 03:31

answered Dec 08 '14 at 17:09

MH2K9

11,951
7
32
49

Using this solved the problem. I wasn't considering that the buttons were dynamically rendered. I didn't think it would make a difference because the click handlers fired after `document.ready`! – alex Dec 08 '14 at 17:14
1

Some more explanations about delegates and especially event bubbling mechanism would have been cool. "Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime" – Florian F. Dec 08 '14 at 21:29
More about delegate: http://www.sitepoint.com/event-delegation-with-jquery/ – MH2K9 Dec 09 '14 at 03:27

Click handler not working

1 Answers1