CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3modal-dialog
dx_over_dt
dx_over_dt

Reputation: 14318

Bootstrap Modal Toggle event happening twice

I have an asp:DataList. Each item in the list has a Delete button that will pop up a confirmation modal.

<asp:DataList ID="dlKeywords" runat="server" 
    RepeatLayout="Table" CssClass="table table-striped">
    <ItemTemplate>
    ...
        <div class="btn btn-default glyphicon glyphicon-trash" data-toggle="modal"
            data-target="#modalDeleteWarning" data-keyword-id="<%# Eval("keywordId") %>"
            data-keyword-name="<%# Eval("keyword") %>">
        </div>
    ...
    </ItemTemplate>
</asp:DataList>
<div id="modalDeleteWarning" class="modal fade">
    ...
</div>

For some reason the event fires twice, so it toggles on and off again immediately.

I tried looking at $._data(btn_object_reference, "events") to see if the click event handler was attached twice, but that returns undefined.

Not surprisingly, it works just fine in jsfiddle.

I looked at this stackoverflow question, but none of the parent elements are position: absolute.

This question suggests that AJAX might be the issue, and I do have this DataList in an UpdatePanel, but removing the UpdatePanel does not fix the issue.

I also tried removing the DataList, and just using a button on its own with contrived values, but I get the same behavior.

I don't know how to debug further. Is there a way to see if the click event is being fired on multiple elements or something?

I'm javascript-proficient, but not an expert by any means, so I'm sure there are a lot of things I haven't checked yet.

Upvotes: 0

Views: 2504

Answers (1)

dx_over_dt
dx_over_dt

Reputation: 14318

It turns out I was loading both bootstrap.js v3.3.0 and bootstrap.js v3.3.1 onto the same page. That'll do it.

Upvotes: 4

Related Questions