jQuery代码不适用于html按钮[关闭]

Question

在我的系统中，用户可以针对他们面临的问题创建/打开票证。一旦我们解决了这个问题，我们就会关闭票证。然后，该特定票证会显示在已关闭票证下。现在用户可以选择重新打开工单。如果他这样做了，票就会显示在已打开的票下。

在这种情况下，我希望票证名称包含“重新打开”标签。换句话说，当单击重新打开按钮时，我需要更改票证名称。

<!----------------button------------------>
<div id="btnTemplate" class="hide">
  <div class="btn-group btn-group-sm">
    <a href="#" data-original-title="Reopen Ticket" class="enable-tooltip btn btn-alt btn-danger reopen-btn">
      <i class="fa fa-undo"></i>
    </a>
  </div>
</div>
<!----------------button------------------>

$(document).on("click", "#reopen-btn", function(e) {
   $(e.target).innerHtml('<span>(Reopended)</span>');
});

完整的html代码：

    <div id="btnTemplate" class="hide">
     <div class="btn-group btn-group-sm">
    <a href="#" data-original-title="View Ticket" class="enable-tooltip btn btn-alt btn-primary view-btn"><i
                class="fa fa-desktop"></i>
    </a>
    <a href="#" data-original-title="Add Expected Closing Date"
       class="enable-tooltip btn btn-alt btn-primary date-btn">
        <i class="fa fa-calendar"></i>
    </a>
    <a href="#" data-original-title="Transfer Ticket"
       class="enable-tooltip btn btn-alt btn-primary transfer-btn">
        <i class="fa fa-exchange"></i>
    </a>
    <a href="#" data-original-title="Close Ticket"
       class="enable-tooltip btn btn-alt btn-danger close-btn">
        <i class="fa fa-remove"></i>
    </a>

    <a href="#" data-original-title="Reopen Ticket"
       class="enable-tooltip btn btn-alt btn-danger reopen-btn" id="reopen-btn" >
       <i class="fa fa-undo"></i>
    </a>
   </div>
 </div>

Answer 1

你不应该使用innerHtml，而应该使用.html()

另外，您应该使用.reopen-btn 而不是#reopen-btn，因为它是一个类而不是ID。

$(document).on("click",".reopen-btn", function (e){
    $(e.target).html('<span>(Reopended)</span>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btnTemplate" class="show">
    <div class="btn-group btn-group-sm">
        <a href="#" data-original-title="Reopen Ticket"
           class="enable-tooltip btn btn-alt btn-danger reopen-btn">
            <i class="fa fa-undo"></i>Button
        </a>
    </div>
</div>

Answer 2

在您的按钮代码中添加 idreopen-btn。您正在使用类重新打开-btn 并传递 #reopen-btn。所以，你的活动不工作

  <a href="#" data-original-title="Reopen Ticket"
      class="enable-tooltip btn btn-alt btn-danger reopen-btn" id="reopen-btn" >
      <i class="fa fa-undo"></i>
  </a>
 

希望对你有所帮助。

Answer 3

您可以使用以下代码。

<div id="btnTemplate" class="show">
    <div class="btn-group btn-group-sm">
        <a href="#" data-original-title="Reopen Ticket" class="enable-tooltip btn btn-alt btn-danger reopen-btn" id="reopen-btn">Ticket Title</a>
    </div>
</div>

你的 JQuery 应该是，

$(document).on(
    "click",
    "#reopen-btn",
    function (e){
        $(e.target).text('reopened : ' + $(e.target).text());
    }
);

在您的代码中，您尝试将事件绑定到 <a href> 及其类名。但是您使用了#reopen-btn 标识符。 # 标记用于用其id 标识一个元素。所以你需要给你的元素添加id属性或者你需要使用.reopen-btn来识别它。

另一个错误是使用innerHTML。使用 jQuery，您可以改用 html 或 text。