Question

我试图让我的document.on函数在用户点击具有名为card的类的p标记时起作用。到目前为止，该功能没有响应。我应该更改什么，以便当我点击具有名为card的类的p标签时，该功能将响应。这是我的HTML和JQuery代码。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Contacts">
    <title>Contacts</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        $('button').click(function(){
            var first = $('input.first').val();
            var last = $('input.last').val();
            var desc = $('textarea').val();

            $('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");

            return false; 
        });

        $(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.  
            alert("test");
        });
    });
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="left">
            <form action="#">
                <p >First name: <input type="text" name="fname" class="first"></p>
                <p >Last name: <input type="text" name="lname" class="last"></p>
                <p class="desc">Description:</p> 
                <p><textarea rows="4" cols="50"></textarea></p>
                <button>Add User</button>
            </form>
        </div>
        <div class="right">
        </div>
    </div>
</body>

这是我的css代码

*{  
/*  outline: 2px dotted red;*/
    border: 0 none;
    padding: 0;
    margin: 0;
}

div.wrapper{
    width: 970px;
    min-height: 100px;
    margin-left: auto;
    margin-right: auto;
}

div.left{
    border: 2px solid black;
    width: 500px;
    display: inline-block;
}

div.right{

    width: 200px;
    display: inline-block;
    height: 100px;
    vertical-align: top;
    padding-right: 100px;
    text-align: center;
}   


p{
    margin-left: 80px;
    margin-top: 20px;
    font-size: 20px;
    width: 400px;
}

p.email{
    margin-left: 45px;
}

button{
    margin: 30px;
    height: 20px;
    width: 100px;
    margin-left: 75px;
    text-align: center;
}

div.card{
    margin-left: 100px;
    margin-bottom: 20px;
    border: 2px solid black;
    width: 300px;
    height: 100px;
    text-align: center;
}

p.back{
    display: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

textarea{
    border: 2px solid black;
}

Answer 1

不知何故，你追加的<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "False" Font-Names = "Arial" Caption = "Available Food" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black"> <Columns> <asp:BoundField DataField = "fID" HeaderText = "Item ID" ItemStyle-HorizontalAlign="Center" > <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundField> <asp:BoundField DataField="description" HeaderText="Name" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"> <HeaderStyle HorizontalAlign="Center"></HeaderStyle> <ItemStyle HorizontalAlign="Center"></ItemStyle> </asp:BoundField> <asp:ImageField DataImageUrlField = "fID" DataImageUrlFormatString = "/ImageLoad.aspx?ImageID={0}" ControlStyle-Width = "200" ControlStyle-Height = "200" HeaderText = "Preview"> <ControlStyle Height="150px" Width="150px"></ControlStyle> </asp:ImageField> </Columns> <FooterStyle BackColor="#CCCCCC" /> <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" HorizontalAlign="Center"/> <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Center" /> <RowStyle BackColor="White" /> <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /> <SortedAscendingCellStyle BackColor="#F1F1F1" /> <SortedAscendingHeaderStyle BackColor="#808080" /> <SortedDescendingCellStyle BackColor="#CAC9C9" /> <SortedDescendingHeaderStyle BackColor="#383838" /> </asp:GridView>被破坏了，它低于其他元素，并且没有被jQuery事件识别为发件人。

以下工作正常：

p.class

Answer 2

看起来你正在滥用标题标签。

我尝试了您的DOM结构，发生的事情是，当Firefox / Chrome在<h1>内看到无效的<p>标记时，会自动关闭<p>标记。您可以在开发者工具中清楚地看到这一点。

您应该使用<span>标记而不是标题标记，请检查此it Works here

JS CODE：

 $('div.right')
 .append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');

Answer 3

你的代码不正确，附加元素没有按照你的意愿格式化，这就是为什么点击功能无法正常工作，检查下面的snippt我修复了你的代码，希望完全有这个帮助你

$(document).ready(function(){

	$('button').click(function(){
		var first = $('input.first').val();
		var last = $('input.last').val();
		var desc = $('textarea').val();

		$('div.right').append('<p class="card"></p>');
			$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
		);
			
	});

	$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.  
		alert("test");

	});
});

* {
	/*  outline: 2px dotted red;*/
	border: 0 none;
	padding: 0;
	margin: 0;
}
div.wrapper {
	width: 970px;
	min-height: 100px;
	margin-left: auto;
	margin-right: auto;
}
div.left {
	border: 2px solid black;
	width: 500px;
	display: inline-block;
}
div.right {
	width: 200px;
	display: inline-block;
	height: 100px;
	vertical-align: top;
	padding-right: 100px;
	text-align: center;
}
p {
	margin-left: 80px;
	margin-top: 20px;
	font-size: 20px;
	width: 400px;
}
p.email {
	margin-left: 45px;
}
button {
	margin: 30px;
	height: 20px;
	width: 100px;
	margin-left: 75px;
	text-align: center;
}
div.card {
	margin-left: 100px;
	margin-bottom: 20px;
	border: 2px solid black;
	width: 300px;
	height: 100px;
	text-align: center;
}
p.back {
	display: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
textarea {
	border: 2px solid black;
}

<div class="wrapper">
  <div class="left">
    <form action="#">
      <p >First name:
        <input type="text" name="fname" class="first">
      </p>
      <p >Last name:
        <input type="text" name="lname" class="last">
      </p>
      <p class="desc">Description:</p>
      <p>
        <textarea rows="4" cols="50"></textarea>
      </p>
      <button>Add User</button>
    </form>
  </div>
  <div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 4

使用开发人员工具，你会看到你添加的html是

<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`

无论我尝试过什么，我都无法让Firefox根据你的需要创建插入html！它就像它不想把h1 / h4放在p里面所以决定早点关闭p！

更改为

$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");

这一切都很顺利 - 确实，奇怪的是，你已经拥有div.card的css，但不是p.card !!

Answer 5

使用<div/>而不是<p/>换行卡，它应该有效。正如<p/>中有其他块元素一样。这打破了你的HTML。

$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");

然后将'p.card'更改为'div.card'。

Answer 6

您可以在Javascript中执行此操作并在函数中使用jquery：

var div = document.getElementById('someid');
function foo(e) {
    //Jquery Here
}
div.addEventListener('click', foo);

这是我用于很多功能的。

试图获得$（document）.on（＆＃39; Click＆＃39;）来为p标签工作

6 个答案: