使用javascript动态检索按钮值

Question

我正在尝试为使用AJAX的线程/注释创建一个动态'页面'列表。

在PHP

，我查看结果，并限制了数据库查询“$页，$页+ 10”

现在，所有我需要做的是找出如何发送用户想要查看哪个页面到PHP。

这里是产生不同的页面按钮的代码：

var htmlpage = "<div class='pages'><ul>" 
for (i=1 ; i < pages+1 ; i++) 
{ 
    htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(document.getElementById('page1').value);' /></li>" 
} 
htmlpage += "<div>"  
htmlpage += "</ul>"; 

*这是正在通过JavaScript实现通过JSON/AJAX调用返回的数据。

document.getElementById('page1').value是给我一个

syntax error[Break On This Error] updatefilters(document.getElementById(

错误。我尝试过不同的格式，只是以此结束。我只是不了解JavaScript以找出问题所在。

我需要将提交按钮的值发送到updatefilters（）函数。有关如何做的建议？

感谢

Answer 1

jQuery的答案：因为你问/ /。

$(document).ready(function() { 
    $(document).on('click', '.submitPage', function() { 
     updatefilters($(this).val()); 
    }); 
}); 

稍微改变你的世代代码（错误地匹配div和ul结尾）我添加了submitPage类。如果你不喜欢使用下面的选择，而不是上面：

$(document).on('click','.pages>ul>li>input',function(){ 

现在代码的改变：

var htmlpage = "<div class='pages'><ul>"; 
var mystart = "<li><input type='submit' class='submitPage' id='page"; 
var mymid = "' value='"; 
var myend = "' /></li>"; 

for (i = 1; i < pages + 1; i++) { 
    htmlpage += mystart + i + mymid + i + myend; 
} 
htmlpage += "</ul></div>" 

Answer 2

试试这个：

htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(document.getElementById(\'page1\').value);' /></li>"; 

编辑：

关于jQuery的，你可以替换上面的：（假设你没有其他的投入开始 “pageX属性”，只是这些循环。

$(document).ready(function() { 
    $("input[id^='page']").live("click",function() { 
     updatefilters($(this)[0].value); 
    }); 
}); 

Answer 3

恳求本身并不使用的document.getElementById来REFFERENCE对象你的，你的代码应该是

htmlpage += "<li><input type='submit' id='page"+i+"' value='"+i+"' onclick='updatefilters(this.value);' /></li>"; 

只是说明这个HTML中的每一件事情有一个JavaScript对象EG贵丽是一个HTMLLiElement所以你的onclick事件是该对象的一个​​方法，所以当你使用它时，它指向你当前所在的对象，就像使用普通的JavaScript对象一样。

这也使它更容易为PHP在您使用对象的值，因为你是它可以防止逃逸报价

，如果你想有一个完整的解决方案，而不是凌乱如上呼应电话。并使用正确的，为什么这样做的：

var divPage = $(document.createElement("div")); 
divPage.attr('class', 'pages'); 
var ulPage = $(document.createElement("ul")); 
for (i=1 ; i < pages+1 ; i++) 
{ 
    var liElement = $(document.createElement("li")); 
    var inputElement = $(document.createElement("input")); 
    input.attr('type', 'submit'); 
    input.attr('id', 'page'+i); 
    input.val(i); 
    input.click(function(){ 
      updateFilters($(this).val()); 
    }); 
    liElement.append(inputElement); 
    ulPage.append(liElement) 
} 
divPage.append(ulPage); 

然后，只需调用$("ElementIdYouAddingTo").append(divPage);

我会说我已经谈到jQuery中使用DOM的document.createElement是唯一的例外，因为用户其不是通过测试的其他方法更快堆栈溢出的用户

Answer 4

我使用this.value

得到我的回答可能看起来显而易见的，特别是通过阅读上面的答案/评论，但重要的是要指出this.value是返回单击元素的值的JavaScript代码。

 var htmlpage = "<div class='pages'><ul>" 
     for (i=1 ; i < pages+1 ; i++) 
      { 
       if (data['page']==i) { 
        htmlpage += "<li><input type='submit' id='selected' value='"+ i +"'/></li>" 
       } else { 
        htmlpage += "<li><input type='submit' id='page' value='"+ i +"' onclick='updatefilters(this.value);' /></li>" 
       } 
      } 
     htmlpage