调用函数也会调用另一个函数

时间:2016-10-31 03:49:12

标签: javascript jquery html css ajax

我有两个按钮:

two buttons

右边的那个调用名为update()的函数:

 <script>
 function update(buttonid){
   document.getElementById(buttonid).disabled = true;

   event.stopPropagation();

   var textboxid = buttonid.slice(0, -2);
   var id= textboxid.substr(0, textboxid.indexOf('_'));
   var columnid= textboxid.substr(textboxid.indexOf('_')+1, textboxid.length);
   var value=document.getElementById(textboxid).value;

   var str=textboxid+"_"+value;


   if (window.XMLHttpRequest) {
     // code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp = new XMLHttpRequest();
   } else {
     // code for IE6, IE5
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.open("GET","ListaRyF/Update?q="+str,true);
   xmlhttp.send();
 }
 </script>

左侧的按钮调用名为&#39; row_update()&#39;的函数,该函数仍为空。

问题是当我点击左键时,也会调用右键的功能。

按钮的HTML代码如下:

左按钮:

<button class="btn btn-default" id="row_1" onclick="row_update('1_9');">
<i class="fa fa-save fa-fw button-row"></i>
</button>

分辩按钮:

<button class="btn btn-default" id="1_2_b" onclick="update('1_2_b');">
<i class="fa fa-save fa-fw"></i>
</button>

我该如何解决这个问题?

谢谢!

1 个答案:

答案 0 :(得分:0)

你必须停止事件冒泡

试试这个:

left-button:

<button class="btn btn-default" id="row_1" onclick="row_update(event,'1_9');">
<i class="fa fa-save fa-fw button-row"></i>
</button>

rigth-button:

<button class="btn btn-default" id="1_2_b" onclick="update(event,'1_2_b');">
<i class="fa fa-save fa-fw"></i>
</button>


 <script>
 function update(event,buttonid){
   document.getElementById(buttonid).disabled = true;

   event.stopPropagation();

   var textboxid = buttonid.slice(0, -2);
   var id= textboxid.substr(0, textboxid.indexOf('_'));
   var columnid= textboxid.substr(textboxid.indexOf('_')+1, textboxid.length);
   var value=document.getElementById(textboxid).value;

   var str=textboxid+"_"+value;


   if (window.XMLHttpRequest) {
     // code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp = new XMLHttpRequest();
   } else {
     // code for IE6, IE5
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.open("GET","ListaRyF/Update?q="+str,true);
   xmlhttp.send();

   return false;
 }


function row_update(event,buttonid)
{
 event.stopPropagation();
  /* your codes goes here */

return false;
}
 </script>

现在他们将继续工作通过这种方式单独悬停你不需要按钮ID 只需确保将事件参数添加到操作