Как открыть новое окно одним щелчком мыши?

Question

У меня есть функция, которая открывает новое окно при нажатии кнопки. Когда я сначала нажимаю, ничего не происходит, но когда я нажимаю второй раз, открывается окно. Мой код:

Script

<script src="<c:url value="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />">  </script> 
<script type="text/javascript"> 
    $(document).on('click','#add',function(){ 
    $(".editField").click(function() { 
     var clickedValue = $(this).find('td:first').text(); 
     window.open('/somePage' + clickedValue, 'New window'); 
     return false; 
    }); 
    }); 
</script> 

HTML тело

<table> 
<tr><td>th text</td></tr> 
<tr class="editField"> 
    <td>data</td> 
    <td>data1</td> 
    <td colspan="2"> 
      <input id = "add" type="submit" value="Add" /> 
    </td> 
    </tr> 
</table> 

Answer 1

На самом деле, нажав на кнопку, вы переплетены нажмите на tr.editfield, но не открытие окна. Итак, если вы затем нажмете на tr (в любом месте, включая кнопку), вы откроете новое окно.
Если вы хотите просто открыть новое окно нажатием кнопки, используйте этот код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
$("#add").click(function() { 
 
\t var clickedValue = $(this).parents('.editField'); 
 
\t clickedValue = $('td:first', clickedValue).text(); 
 
\t window.open('/somePage' + clickedValue, 'New window'); 
 
\t return false; 
 
}); 
 
</script>

Answer 2

Ваш текущий код имеет два слушателя событий, один для $(document).click, а другой с .editField.

Проблема заключается в том, что вы поместили их друг в друга, поэтому слушатель .editField не добавляется до тех пор, пока не будет нажат документ, поэтому потребуется два клика.

$(document).on('click','#add',function(){ // << first click 
    $(".editField").click(function() {  // << event listener added, second click 
    /*...*/ 
    }); 
}); 

Вам нужен только один слушатель:

$(".editField").click(function() { 
    var clickedValue = $(this).find('td:first').text(); 
    window.open('/somePage' + clickedValue, 'New window'); 
    return false; 
}); 

Answer 3

Final решить:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".editField #add").click(function() { 
     var clickedValue = $(this).parents('.editField'); 
     clickedValue = $('td:first', clickedValue).text(); 
     window.open('/somePage' + clickedValue, 'New window'); 
     return false; 
    }); 
    }); 
</script>