javascript - jQuery 添加按钮到 div

Question

我在 div 内有一个动态添加的网格，当您在 grid 中选择 tr 时，它会添加一个类， 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