如何禁用所有文件中特定li项的所有点击事件?

时间:2016-06-06 05:50:18

标签: jquery html twitter-bootstrap

我正在使用AdminLTE引导程序模板。 我想在点击它时禁用或关闭附加到侧边栏项目的所有点击事件处理程序(展开/折叠行为)。

这是我到目前为止所尝试的内容,但它只禁用了当前的方法。 注意:“do-not-open”是我分配给所有treeview li项目的特定类。

    $(".do-not-open").on("click", function (e) {

    alert("Please select fields first");
/// $(this).unbind("click")
    $(this).off("click")

        return;

})

现在.off()或.unbind()只是禁用当前的click方法而不是其他文件中的其他事件处理程序。 这是我的代码的html

<ul class="sidebar-menu">
                <li class="header">MAIN NAVIGATION</li>
                <li class="active treeview">
                    <a href="#">
                        <i class="fa fa-files-o"></i>
                        <span>Saved Queries</span>
                        <span class="label label-primary pull-right"></span>
                    </a>
                    <ul class="treeview-menu" id="saved-queries-options"></ul>
                </li>
                <li class="treeview" id="new-query-tree">
                    <a href="#">
                        <i class="fa fa-list"></i> <span>Fields</span> <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu" id="field-options-list"></ul>
                </li>
                <li class="treeview do-not-open">
                    <a href="#">
                        <i class="fa fa-filter"></i>
                        <span>Conditions</span>
                    @*  <span class="label label-primary pull-right">0</span>*@
                    </a>
                    <ul class="treeview-menu">
                        <li><button type="button" id="btn-add-new-condition" class="btn btn-block btn-success btn-sm">Add New Condition</button></li>
                        <li class="disabled">
                            <div class="sidebar-form white">
                                <label>Selected Condition</label>
                                <select class="form-control" id="condition-number"></select>
                                <label>Use: </label>
                                <label>
                                    <input type="radio" name="condition-pred" value="AND" class="flat-red" checked> AND
                                </label>
                                <label>
                                    <input type="radio" name="condition-pred" id="" value="OR" class="flat-red"> OR
                                </label>
                                <br />
                                <label>Select Table</label>
                                <select id="condition-table-options" class="form-control"></select>
                                <label>Select Field</label> <br />
                                <select class="form-control" id="condition-fields-options"></select>
                                <br />
                                <div class="input-group">
                                    <input type="text" id="condition-search-text" class="form-control" placeholder="Search Text">
                                    <span class="input-group-btn">
                                        <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </span>
                                </div>
                                <label>Use: </label>
                                <label>
                                    <input type="radio" name="condition-operator" value="equal" class="flat-red" checked> Equal
                                </label>
                                <label>
                                    <input type="radio" name="condition-operator" value="not-equal" class="flat-red"> Not Equal
                                </label>
                                <div class="icons">
                                    <span class="glyphicon glyphicon-backward" id="fast-back"></span>
                                    <span class="glyphicon glyphicon-chevron-left" id="back"></span>
                                    <span class="glyphicon glyphicon-chevron-right" id="forward"></span>
                                    <span class="glyphicon glyphicon-forward" id="fast-forward"></span>




                                </div>
                                <select id="condition-filtered-list" size="6" class="form-control"></select>

                            </div>
                        </li>
                    </ul>
                </li>
                <li class="treeview do-not-open">
                    <a href="#">
                        <i class="fa fa-th"></i>
                        <span>Production Forecast Options</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li>


                        </li>
                        <li>
                            <div class="sidebar-form white">
                                <label>
                                    <input type="checkbox" class="years-check" id="Months" /> Months
                                </label>
                                <div class="years-input">
                                    <label>Start: </label>
                                    <select class="form-control small years-start"></select>

                                    <label>End: </label>
                                    <select class="form-control small years-end"></select>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="sidebar-form white">
                                <label>
                                    <input type="checkbox" class="years-check" id="Quarters" /> Quarters
                                </label>
                                <div class="years-input">
                                    <label>Start: </label>
                                    <select class="form-control small years-start"></select>

                                    <label>End: </label>
                                    <select class="form-control small years-end"> </select>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="sidebar-form white">
                                <label>
                                    <input type="checkbox" class="years-check" id="Years" /> Years
                                </label>
                                <div class="years-input">
                                    <label>Start: </label>
                                    <select class="form-control small years-start"> </select>

                                    <label>End: </label>
                                    <select class="form-control small years-end"> </select>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="sidebar-form white">
                                <label>Fiscal Year Start Month: </label>
                                <select class="form-control" id="forecast-fy-month-start"> <option id=1 selected>January</option> <option id=2>February</option> <option id=3>March</option> <option id=4>April</option> <option id=5>May</option> <option id=6>June</option> <option id=7>July</option> <option id=8>August</option> <option id=9>September</option> <option id=10>October</option> <option id=11>November</option> <option id=12>December</option></select>


                                <label><input type="checkbox" id="fy-ends-calendar-year" /> Fiscal Year ENDS in Calendar Year </label>
                            </div>
                        </li>
                        <li>
                            <div class="form-group white">
                                <label>Select Forecast: </label>
                                <select size="5" id="select-forecast-options" class="form-control"></select>
                            </div>

                        </li>
                        <li>
                            <div class="form-group white">
                                <label>
                                    Select Currency
                                </label>
                                <select class="form-control" id="select-currency-options"> </select>
                                <label><input type="checkbox" id="grand-total-options" /> Include Grand Total </label>
                                <br />
                                <label>
                                    Show subtotal for:
                                </label>
                                <select size="6" class="form-control" id="show-subtotal-options"></select>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="treeview do-not-open">
                    <a href="#">
                        <i class="fa fa-check-circle"></i>
                        <span>Data Options</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"> Select Datapoint(s)</a></li>
                        <li>
                            <div class="sidebar-form white" id="data-points-options">

                            </div>
                            <a>Select Business Status(es)</a>
                            <div class="sidebar-form white" id="data-buisness-status-options">

                            </div>
                            <a>Select Part Type(s)</a>
                            <div class="sidebar-form white" id="part-type-options">

                            </div>
                        </li>
                    </ul>
                </li>
                <li class="treeview do-not-open">
                    <a href="#">
                        <i class="fa fa-edit"></i> <span>Fields for Ordering</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu white" id="ordering-options"></ul>
                </li>
            </ul>

2 个答案:

答案 0 :(得分:1)

使用event.preventDefault API

阻止默认行为
$(".do-not-open").on("click", function (e) {
     e.preventDefault();
     ... Your codes here  
     return;

})

这将阻止重定向。

答案 1 :(得分:0)

为什么不这样做?

$(".do-not-open").off('click');

会删除所有匹配的li项的点击次数吗?