添加一個按鈕，在jQuery中列出項目並點擊事件

我想爲每個列表項添加一個簡單的「刪除按鈕」。列表元素包含從某個表加載的條形碼，我想爲每個條形碼添加刪除功能。添加一個按鈕，在jQuery中列出項目並點擊事件

理想的解決方案是在每個列表項右中間的一個簡單的X按鈕。當用戶點擊它時，會出現一個對話框，詢問是否確認刪除操作。如果點擊取消，則不會發生任何事情，但如果點擊確認條形碼應爲：1.刪除表格並2.從列表中刪除 - 或刷新頁面。

由於我沒有使用jQuery的經驗，所以請問是否有人可以幫助我。這是一個ASP.NET應用程序，這裏是代碼：

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Entry.aspx.vb" Inherits="KPIP_Entry" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Entry</title> 
    <link href="../App_Themes/Outlook/KPIP.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     #entryForm 
     { 
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: #c3daf9; 
      background-image: url("../App_Themes/Outlook/Base/CoolTable_Background.png"); 
      background-repeat: repeat-x; 
     } 

     #attachments 
     { 
      width: 320px; 
      overflow: auto; 
      height: 100%; 
      float: left; 
     } 

     #attachments span.tetradaGroupLabel:first-child 
     { 
      margin-top:16px; 
     } 

     ul#barcodesList 
     { 
      display: block; 
      width: 320px; 
      overflow: auto; 
     } 

     ul#barcodesList > :first-child 
     { 
      border-top: 1px solid #2557AD; 
      margin-top: 20px; 
     } 

     ul#barcodesList > li 
     { 
      list-style: none; 
      margin-left: 20px; 
      margin-right: 20px; 
      border-collapse: separate; 
      border-left: 1px solid #2557AD; 
      border-right: 1px solid #2557AD; 
      border-bottom: 1px solid #2557AD; 
      color: #2557AD; 
      height: 20px; 
      background: #e7f0fe; 
      cursor: pointer; 
      padding-left: 12px; 
      padding-top: 6px; 
     } 

     ul#barcodesList > li.clicked 
     { 
      background: #91B5E7; 
      color: #ffffff; 
     } 

     #entryViewer 
     { 
      height: 100%; 
      border-left: solid 4px #2557AD; 
      float: left; 
     } 

     #dummyPostbackButton 
     { 
      display: block; 
      width: 0px; 
      height: 0px; 
      overflow: hidden; 
      visibility: hidden; 
     } 

     #upload_main 
     { 
      margin: 12px 20px 0px 20px; 
      float:left; 
      clear:both; 
     } 

     #upload_main .cc_table_container 
     { 
      max-width: 278px; 
     } 

     #barcodesShadow 
     { 
      width: 280px; 
      margin-bottom: 20px; 
      margin-left: 20px; 
     } 

     span.tetradaGroupLabel 
     { 
      display:block; 
      margin-top:12px; 
      padding-left:32px; 
      float:left; 
     } 
    </style> 
    <script type="text/javascript" src="../Script/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="Script/kpip.js"></script> 
    <script type="text/javascript"> 
     var barcodes = { <%# BarcodeArray %> } 

     kpip.viewAttachment = function (url) { 
      $("#entryViewer").attr("src", "../Viewer.aspx?image=" + url); 
     } 

     function resizeViewer() { 
      $("#entryViewer").hide(); 
      $("#attachments").hide(); 
      $("#entryViewer").width($("#entryForm").width() - 320 - 4); 
      $("#entryViewer").height($("#entryForm").height() - $("#header").height() - 4); 
      $("#attachments").height($("#entryForm").height() - $("#header").height() - 4); 
      $("#attachments").show(); 
      $("#entryViewer").show(); 
     } 

     $(function() { 
      $.each(barcodes, function(key, value) { 
       $("#barcodesList").append("<li>" + key + "</li>"); 
      }); 

      if ($("#barcodesList").children().size() > 0) { 
       $("#barcodesList").after('<div id="barcodesShadow" class="cc_panelShadow"></div>'); 
      } 

      $("#barcodesList > li").click(function() { 
       $("#barcodesList > li").removeClass("clicked"); 
       $(this).addClass("clicked"); 
       $("#selectedBarcode").val($(this).text()); 

       var params = '{ barcode : "' + $(this).text() + '", path : "' + barcodes[$(this).text()] + '" }'; 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "Entry.aspx/Attach", 
        dataType: "json", 
        data: params, 
        success: function() { 
         $("#dummyPostbackButton").click(); 
        }, 
        error: function (request, status, error) { 
         alert("Error attaching barcode file."); 
        } 
       }); 
      }); 

      $(window).bind("resize", function() { 
       setTimeout(function() { resizeViewer(); }, 10); 
      }); 
      setTimeout(function() { resizeViewer(); }, 10); 

      $("#barcodesList > li").each(function() { 
       if ($(this).text() != $("#selectedBarcode").val()) { return; } 
       $(this).addClass("clicked"); 
      }); 
     }); 

    </script> 
</head> 
<body> 
    <form id="entryForm" runat="server"> 
    <div id="header" class="ContentHeader"> 
     <asp:Label runat="server" CssClass="ContentHeaderLabel" Text="<%$ Resources: Header.Text %>"/> 
    </div> 
    <div id="attachments"> 
     <asp:Label class="tetradaGroupLabel" runat="server" Text="<%$ Resources: AttachmentsPanel.Text %>" /> 
     <tetrada:MultiUpload ID="upload" runat="server" /> 
     <asp:Panel ID="BarcodesListPanel" runat="server"> 
      <asp:Label class="tetradaGroupLabel" runat="server" Text="<%$ Resources: BarcodesPanel.Text %>" /> 
      <ul id="barcodesList"></ul> 
     </asp:Panel> 
     <asp:HiddenField ID="selectedBarcode" runat="server" /> 
     <asp:Button ID="dummyPostbackButton" runat="server" CausesValidation="false" /> 
    </div> 
    <iframe id="entryViewer" frameborder="0" runat="server"></iframe> 
    </form> 
</body> 
</html>

而後面的代碼：

Imports System.Collections.Generic 
Imports System.IO 
Imports System.Web.Services 

Imports Tetrada.Kpip.Web 
Imports Tetrada.Kpip.Domain 
Imports Tetrada.Kpip.Service 
Imports Tetrada.Kpip.Web.Controls 

Partial Class KPIP_Entry 
    Inherits KpipPage 

    Private _barcodes As IList(Of BarcodeAttachment) = New List(Of BarcodeAttachment)() 

    Private ReadOnly Property Barcodes() As IList(Of BarcodeAttachment) 
     Get 
      Return _barcodes 
     End Get 
    End Property 

    Protected Sub New() 
     If Not KpipConfiguration.IsBarcodeSourceEnabled Then Return 
     _barcodes = New RepositoryFactory().GetDocumentRepository().GetAvailableBarcodes(KpipConfiguration.BarcodesSection.Source.Value, KpipConfiguration.BarcodesSection.Table.Value) 
    End Sub 

    Public ReadOnly Property BarcodeArray As String 
     Get 
      Dim result As StringBuilder = New StringBuilder() 
      For Each barcode As BarcodeAttachment In Barcodes 
       result.AppendFormat("""{0}"":""{1}"", ", barcode.Barcode, barcode.Path.Replace("\", "\\").Replace("\", "\\")) 
      Next 
      If Barcodes.Count = 0 Then Return result.ToString() 
      Return result.Remove(result.Length - 2, 2).ToString() 
     End Get 
    End Property 

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load 
     BarcodesListPanel.Visible = KpipConfiguration.IsBarcodeSourceEnabled 
     DataBind() 
    End Sub 

    Protected Sub DummyPostbackButton_Click(sender As Object, e As System.EventArgs) Handles dummyPostbackButton.Click 
     If Not upload.HasFiles() Then Return 
     Dim manager As TemporaryPathManager = New TemporaryPathManager() 
     ClientScript.RegisterStartupScript(Me.GetType(), "showAttachment", String.Format("$(function() {{ kpip.viewAttachment('{0}'); }});", manager.ToAbsoluteUrl(upload.Guid, upload.UploadedFiles(0))), True) 
    End Sub 

    <WebMethod(EnableSession:=True)> _ 
    Public Shared Sub Attach(ByVal barcode As String, ByVal path As String) 
     Dim manager As TemporaryPathManager = New TemporaryPathManager() 
     Dim name As String = IO.Path.GetFileName(path) 
     If Not manager.IsPathCreated(MultiUpload.CurrentGuid) Then manager.CreatePath(MultiUpload.CurrentGuid) 
     MultiUpload.Clear() 
     File.Copy(path, manager.ToAbsolutePath(MultiUpload.CurrentGuid, name)) 
     MultiUpload.AddFile(name) 
     KpipSession.SelectedBarcode = barcode 
    End Sub 
End Class

預先感謝您。

編輯：

我用跨度代替按鈕和我得到了期望的效果。現在的問題是點擊span時，列表項點擊事件觸發，而不是跨度點擊事件。我究竟做錯了什麼？

代碼：

deleteButton = $('<span />').addClass('deleteButton').text('Delete'); 
$('ul#barcodesList li').append(deleteButton);

隨着風格：

ul#barcodesList > li > span 
{ 
    float: right; 
    color: #2557AD; 
    display:block; 
} 

ul#barcodesList > li > span:hover 
{ 
    display:block; 
    color: red; 
}

Click事件：

$('#barcodesList > li > span').click(function(){ 
     function() { 
      alert("hi"); 
     } 
    });

EDIT2：

我已經加入此功能停止父從發射點擊事件：

$("#barcodesList > li > span").click(function(e) { 
     e.stopPropagation(); 
     $('#dialog').dialog('open'); 
    });

現在有效。謝謝。

來源

2013-07-17 no9

您可以使用jQuery的append(),prepend(),appendTo()和prependTo()函數向其他元素添加元素。

您既可以將純html添加爲字符串，也可以使用jQuery構建元素，該元素看起來更清晰。

例如

deleteButton = $('<button />').addClass('deleteButton').text('Delete'); 

// using appendTo/prependTo: 
deleteButton.appendTo('ul#barcodesList li'); // adds it on the end of the element you've selected 

// using append/prepend: 
$('ul#barcodesList li').append(deleteButton); // you can pass in the jquery object here

來源

2013-07-17 08:30:59

感謝您的提示。請參閱我的編輯...我使用了跨度，因爲我在定位按鈕時遇到了問題。你能幫我弄清楚爲什麼我不能點燃跨度點擊事件嗎？ – no9

如果您使用'$（'span'）。click（...）'那麼它是因爲您動態添加範圍，所以事件不會被附加。您需要使用jQuery的'on（）'http://api.jquery.com/on/才能在動態添加的元素上傳播事件。 –

添加一個按鈕，在jQuery中列出項目並點擊事件

回答

相關問題