onclick监听器无法使用动态dom内容

时间:2016-12-10 06:10:47

标签: javascript jquery

在几个事件上使用jquery我需要添加元素,但是在那些元素上没有触发click事件。我试图在ready函数中添加监听器,但它不起作用。有人请帮忙。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
    	<title>Find Listeners</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h2>Find Listeners</h2>
		<form name="checkListForm">
			<input type="text" name="checkListItem"/>
		</form>
		<button id="button">Click to Add</button>
		<br/><br/><br/>
      List
		<div class="list"></div>
	</body>
</html>
  PostResponseAsyncTask task = new PostResponseAsyncTask(getActivity(), postData);

5 个答案:

答案 0 :(得分:1)

追加事件元素无法正常点击。请尝试 on()kindly see the important of that

on()

了解$(document).ready(function(){ $('#button').click(function(){ var toAdd = $('input[name=checkListItem]').val(); $('div.list').append('<div class="item-next">' + toAdd + '</div>') }); }); $(document).on('click','.item-next',function(){ alert('its work') }); Why use jQuery on() instead of click()非常有帮助

&#13;
&#13;
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
    	<title>Find Listeners</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h2>Find Listeners</h2>
		<form name="checkListForm">
			<input type="text" name="checkListItem"/>
		</form>
		<button id="button">Click to Add</button>
		<br/><br/><br/>
      List
		<div class="list"></div>
	</body>
</html>
&#13;
$(function() {
  table = $("<table></table>").appendTo("#daytoday");
  table.append("<tr><th>DAY</th><th> LOCATION </th><th> HOTEL </th></tr>")
  $.each(data.glance, function(index, value) {
    row = $("<tr></tr>").appendTo(table);
    $("<td></td>").appendTo(row).html(index);

    $.each(value, function(i, v) {
      $("<td></td>").appendTo(row).html(v);
    });
  });

});
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试在'checkListItem'

上使用var toAdd = $("input[name='checkListItem']").val();
#include <iostream>
#include <type_traits>

template <typename... Ts, typename T, typename std::enable_if<std::disjunction<std::is_same<T, Ts>...>::value>::type* = nullptr>
void test(T i)
{
    std::cout << "test\n";
}

int main()
{
    int i = 4;
    test<int, float, const char*>(i);
    //test<float, const char*>(i); // compile fails since no int

    // or use a typedef for the specialization
    typedef void (*specialized_t)(int);
    constexpr specialized_t test2 = &test<int, float, const char*>;
    test2(i);
}

答案 2 :(得分:0)

当您动态创建元素时,请使用以下结构作为事件侦听器:

int a = 0,b = 0,c = 0;

for (a = 1; a <= SUMTOTAL; a++)
{
    for (b = a+1; b <= SUMTOTAL-a; b++)
    {
        c = SUMTOTAL-(a+b);

        if (c == sqrt(pow(a,2)+pow(b,2)) && b < c)
        {
            std::cout << "a: " << a << " b: " << b << " c: "<< c << std::endl;
            std::cout << a * b * c << std::endl;
        }
    }
}

答案 3 :(得分:0)

试试这个(已解决)。 learn more about delegate methods

 $(document).ready(function(){
 $('#button').click(function(){
 var toAdd = $('input[name=checkListItem]').val();
 $('div.list').append('<div class="item-next">' + toAdd + '</div>')

 });
 $('div.list').on('click', '.item-next', function(){
  $(this).html($(this).html()+"<span style='color:red;'> clicked")
  alert('clicked on '+$(this).html());
   });
   });

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
    	<title>Find Listeners</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h2>Find Listeners</h2>
		<form name="checkListForm">
			<input type="text" name="checkListItem"/>
		</form>
		<button id="button">Click to Add</button>
		<br/><br/><br/>
      List
		<div class="list"></div>
	</body>
</html>

答案 4 :(得分:0)

这对你有用

 $(document).ready(function(){
   $('#button').click(function(){
       var toAdd = $('input[name=checkListItem]').val();
       $('div.list').append('<div class="item-next">' + toAdd + '</div>')

   });
 $(document).on("click",".item-next",function(){alert("myalert")})
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
    	<title>Find Listeners</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h2>Find Listeners</h2>
		<form name="checkListForm">
			<input type="text" name="checkListItem"/>
		</form>
		<button id="button">Click to Add</button>
		<br/><br/><br/>
      List
		<div class="list"></div>
	</body>
</html>