将变量传递给ajax中的onclick函数

时间:2018-06-12 19:09:01

标签: javascript ajax

我在ajax中有一个变量,我想发送它onclick事件。这里..

function childID(Obj){
        var replayId = Obj.id;
        // var replayId = '"#'+replayId+'"';
        // console.log(replayId); 
     }

我想保存onlick事件..

$('#allcomments').on("click", replayId, function(){  
     console.log('something action...'); 
 }); 

这里所有评论都是父ID,而且在loding页面上不会退出重播。

2 个答案:

答案 0 :(得分:0)

您可以使用Clousures维护状态



function childID(Obj){
  var replayId = Obj.id;
  // var replayId = '"#'+replayId+'"';
  // console.log(replayId); 
  function outer (id) {
     // id will remain in scope of this function and will be accessable to inner callback
     return function inner () {
      console.log('something action...', id);
     }
  }
  $('#allcomments').on("click", outer(replayId));
  
}




答案 1 :(得分:0)

您正在将变量replayId创建为function childID(Obj)的本地变量。

function childID(Obj) {
  var replayId = Obj.attr('id');
  return replayId;
}

$('input[type=button]').on("click", function() {
  var theID = childID($(this));
  alert(theID);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="button" id="drink" value="Drink Me"></td>
    <td><input type="button" id="eat" value="Eat Me"></td>
  </tr>
</table>

修改

如果没有更多的代码,很难创建一个强大的答案。我也不完全了解你的困境。 AJAX的目的是不依赖于多个页面来实现功能。除了API调用之类的东西外,所有内容都应该在页面本身上完成。

这是我基于评论系统构建的另一个片段。它在页面上使用了两个函数 - 可以变成一个函数 - 带有注释,返回值以供AJAX使用。

function findCommentID (comment) {
	return comment.parents('li').attr('id');
}

$('#allcomments li li').on('click',function(){
	var commentID = findCommentID($(this))
	var commentAct = $(this).attr('class')
	
	/* Do your AJAX calls here */
	alert(commentID + " " + commentAct)
});
h2 {
  margin-bottom: 0;
  }

p:first-of-type {
  margin-top: 0;
  }
  
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
  
ul ul {
  text-align: right;
  }
  
li li {
  display: inline;
  padding: .5em;
  margin-right: 1em;
  }

li li:hover {
  background-color: #FDD;
  cursor: pointer;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="allcomments">
	<li id="comment1">
		<h2>Comment 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta, quam eget hendrerit molestie, felis mi placerat tellus, sed imperdiet augue ipsum non quam. Praesent et nisl eu dolor sagittis fringilla. Quisque mi dolor, porttitor quis nunc sed, pulvinar pellentesque ex. Donec cursus volutpat orci quis dapibus. Maecenas id erat id mi blandit viverra pharetra non leo. Cras ut eros sit amet dolor feugiat molestie et a massa. Mauris velit enim, interdum ut diam at, condimentum bibendum enim. Curabitur dignissim consectetur ligula, in scelerisque orci placerat et. Vivamus tristique sem quis massa sodales elementum. Etiam non aliquet augue, a tincidunt ligula. In eget urna sit amet leo feugiat interdum.</p>
		<nav><ul><li class="reply">REPLY</li><li class="report">REPORT</li></ul></nav>
	</li>
	<li id="comment2">
		<h2>Comment 2</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta, quam eget hendrerit molestie, felis mi placerat tellus, sed imperdiet augue ipsum non quam. Praesent et nisl eu dolor sagittis fringilla. Quisque mi dolor, porttitor quis nunc sed, pulvinar pellentesque ex. Donec cursus volutpat orci quis dapibus. Maecenas id erat id mi blandit viverra pharetra non leo. Cras ut eros sit amet dolor feugiat molestie et a massa. Mauris velit enim, interdum ut diam at, condimentum bibendum enim. Curabitur dignissim consectetur ligula, in scelerisque orci placerat et. Vivamus tristique sem quis massa sodales elementum. Etiam non aliquet augue, a tincidunt ligula. In eget urna sit amet leo feugiat interdum.</p>
		<nav><ul><li class="reply">REPLY</li><li class="report">REPORT</li></ul></nav>
	</li>
	<li id="comment3">
		<h2>Comment 3</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta, quam eget hendrerit molestie, felis mi placerat tellus, sed imperdiet augue ipsum non quam. Praesent et nisl eu dolor sagittis fringilla. Quisque mi dolor, porttitor quis nunc sed, pulvinar pellentesque ex. Donec cursus volutpat orci quis dapibus. Maecenas id erat id mi blandit viverra pharetra non leo. Cras ut eros sit amet dolor feugiat molestie et a massa. Mauris velit enim, interdum ut diam at, condimentum bibendum enim. Curabitur dignissim consectetur ligula, in scelerisque orci placerat et. Vivamus tristique sem quis massa sodales elementum. Etiam non aliquet augue, a tincidunt ligula. In eget urna sit amet leo feugiat interdum.</p>
		<nav><ul><li class="reply">REPLY</li><li class="report">REPORT</li></ul></nav>
	</li>
</ul>