Question

我在div内有一个动态添加的网格，当您在tr中选择grid时，会添加一个类grid-row-selected，突出显示tr。所以我要做的是创建一个jquery或javascript function，当tr突出显示并添加该类时，将在ibox-tools中创建一个按钮。此外，如果删除grid-row-selected，按钮也是如此。这就是我现在所做的不起作用（不会添加按钮）。

JQUERY

/* Function is called when a tr is selected with the grid-row class */
$("tr.grid-row").click(function() {
    /* Checks if this class is selected and has grid-row-selected class */
    if ($(this).hasClass(".grid-row-selected") ) {
        /* Adds button to ibox-tools in div */
        $(".ibox-tools").add($('<input type="button" value="new button"/>'));
    }
});

HTML

<div class="ibox-title">
    // Where the button should be populated into
    <div class="ibox-tools">
        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#enlargeGraphOneModal" data-content="#ibox-2"></button>
    </div>
</div>
<div class="ibox-content" id="ibox-2">
    <div class="content active row" id="graphOneData" style="overflow:auto">
        <!--GRID DYNAMICALLY ADDED-->
        @Html.Grid(Model).Columns(columns =>
            {
            columns.Add(scenario => scenario.DisplayName).Titled("Display Name").Sortable(true);
            columns.Add(scenario => scenario.Description).Sortable(true);
            columns.Add(scenario => scenario.ModifiedBy).Titled("Modified By").Sortable(true);
            columns.Add(scenario => scenario.ModifiedOn).Titled("Modified On").Sortable(true);
            columns.Add(scenario => scenario.StartYear).Titled("Start Year").Sortable(true);
            columns.Add(scenario => scenario.EndYear).Titled("End Year").Sortable(true);
            }).WithPaging(20).Sortable()
    </div>
</div>

Answer 1

问题是你的hasclass验证和方法它应该是：

$("tr.grid-row").click(function() {
if ($(this).hasClass("grid-row-selected") ) {
    alert("test")
    $(".ibox-tools").append($('<input type="button" value="new button"/>'));
} });

Example fidle

Answer 2

您的网格是动态添加的。所以＆＃39; tr.grid-row＆＃39;当您的代码添加事件侦听器时，它不存在。使用＆＃39; .on＆＃39;方法创建一个委托函数，该函数被添加到动态添加到DOM的元素中。您还必须确保此代码在添加了＆＃39; grid-row-selected＆＃39;的代码之后运行。在点击行的类，否则行不会有类。如果你可以将这个代码添加到该函数会更好。

$(function(){
    $("body").on('click', 'tr.grid-row', function() {
        /* Checks if this class is selected and has grid-row-selected class */
        if ($(this).hasClass(".grid-row-selected") ) {
            /* Adds button to ibox-tools in div */
            $('#gridEdit').remove();
            $(".ibox-tools").append($('<input id="gridEdit" type="button" value="new button"/>'));
        }
    });
});

这还取决于您使用的jQuery版本。对于旧版本，它是＆＃39; .live（）＆＃39;。我不知道它改变了什么版本。

编辑：我的代码中有一个拼写错误。我有一个额外的＆＃39;（＆＃39;在＆＃39;功能＆＃39;。复制/粘贴错误。如果你现在尝试它，它应该工作只要这段代码在代码之后运行将＆＃39; grid-row-selected＆＃39;类添加到tr。http://jsfiddle.net/rgkw9pLs/

Answer 3

尝试使用＆＃34;追加＆＃34;而不是＆＃34;添加＆＃34;

{{1}}

JQuery为div添加按钮

3 个答案: