Click event from button inside popup is not working

Question

I am creating a popup window using jQuery in my ASP.Net application. The popup is opening on button click. I have written following code to open the popup.

html code:

        <%-- Popup --%>
        <div id="modal_dialog" class="PopupStyle" style="display: none;">
            <table>
                <tr>
                    <td style="width: 100px">
                        <label class="control-label">Photo</label>
                    </td>
                    <td>
                        <asp:FileUpload ID="FileUpload1" runat="server" />
                        <asp:RegularExpressionValidator
                            ID="regexValidateImageFil" runat="server" ControlToValidate="FileUpload1"
                            ErrorMessage="Only file types with jpg, png, gif are allowed."
                            ValidationExpression="^([0-9a-zA-Z_\-~ :\\])+(.jpg|.JPG|.jpeg|.JPEG|.bmp|.BMP|.gif|.GIF|.png|.PNG|.pdf)$"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <label class="control-label">File Type</label>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlUpFileType" runat="server" class="form-control" Width="400px">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <label class="control-label">Note</label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtNotes" runat="server" class="form-control" MaxLength="150" Width="400px"></asp:TextBox>
                    </td>
                </tr>
            </table>
            <div style="padding: 10px">
            </div>
            <asp:Button ID="btnSaveUpoad" runat="server" class="btn btn-primary" Text=" Upload File " OnClick="btnSaveUpoad_Click" />
        </div>
    </form>
</div>

And the jQuery code:

<script type="text/javascript">
    $(document).ready(function () {
        $("[id*=btnUpoad]").on("click", function () {
            debugger;
            $("#modal_dialog").dialog({ width: 520 });

            $("#modal_dialog").dialog({
                title: "Upload Files",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            return false;
        });
    });
</script>

As you can see there is a button in my the html, i.e.,

<asp:Button ID="btnSaveUpoad" runat="server" class="btn btn-primary" Text=" Upload File " OnClick="btnSaveUpoad_Click" />

But the click event (from button inside popup i.e., btnSaveUpoad) is not calling the corresponding function written in the .cs file.

Any idea.

Thanks in advance.

Partha

Answer 1

Try this for your solution:
$(document).on("click", "[id*=btnUpoad]",function () {

This may work for you.

jQuery behaves differently As you assign any button event directly with class then it will only work with the current class which is in DOM but if suppose new Document content added in DOM and you want to fire a click event on that newly added DOM element. Then you have to go with this

   *For current DOM 
    jQuery(".abc").click(function(){});*

    *For dynamic dom element 
    jQuery(document).on("click", ".abc", function(){});*