JQuery的添加按鈕的div

我有一個div動態添加，就是當你選擇在grid一個tr它增加了一個班，grid-row-selected，這凸顯了tr內的網格。所以我想要做的是創建一個jQuery或JavaScript function，當tr被突出顯示並添加類時，將在ibox-tools中創建一個按鈕。此外，如果grid-row-selected被刪除，按鈕也是如此。這是我現在沒有工作（不會添加按鈕）。JQuery的添加按鈕的div

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>

來源

2015-11-04 Markus

哪裏是「易寶工具」 CSS類在HTML –

@VimalanJayaGanesh你意思是我在哪裏打電話給我的CSS中的鏈接到我的HTML或什麼是IBOX的CSS完全？ – Markus

你正試圖用類「.ibox-tools」添加一個按鈕到控件。首先，我無法在html中看到「.ibox-tools」類。例如：https：//jsfiddle.net/99x50s2s/141/（你必須有一個類「ibox-tools」的控件來添加另一個控件。 –

網格動態添加。所以當你的代碼添加事件監聽器時，'tr.grid-row'不存在。使用'.on'方法創建一個委託函數，該函數被添加到動態添加到DOM的元素中。您還必須確保此代碼在將「網格行選定」類添加到單擊行上的代碼之後運行，否則該行將不具有該類。如果您可以將此代碼添加到該函數中會更好。

$(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版本。對於舊版本，它是'.live（）'。我不確定它改變了哪個版本。

編輯：我的代碼中有一個錯字。我在'function'前加了一個'（'）複製/粘貼錯誤，如果你現在嘗試它，只要在代碼中添加'grid-row-selected'類。在TR http://jsfiddle.net/rgkw9pLs/

來源

2015-11-04 21:46:41

這絕對看起來像它的正確軌道，但它並沒有最終不幸添加一個按鈕 – Markus

@Markus –

真棒我得到它的工作，唯一讓它搞砸的是「網格行選擇」前的「。」，一旦我刪除它的工作。快速的問題，你知道如何做到這一點，當我點擊一個不同的「tr」在網格中添加的按鈕將被刪除，並添加一個新的按鈕。我只想要一個編輯按鈕在ibox工具一次。 – Markus

嘗試使用「追加」，而不是「添加」

$(".ibox-tools").append('<input type="button" value="new button"/>');

來源

2015-11-04 21:15:23 Blodnatt

它仍然沒有工作:( – Markus

的問題是你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

來源

2015-11-04 21:49:01 Sandcar

真棒，工作！但我怎麼知道它只添加一個按鈕？我試圖讓它，所以當用戶點擊「TR」編輯按鈕將彈出，所以他們不會需要超過一個。你也知道如何讓它產生在我已經在ibox工具中的按鈕的左側？ – Markus

JQuery的添加按鈕的div

回答

相關問題