queryselectorall - saber a que elemento se le dio click javascript

¿Cómo consigo que jQuery seleccione elementos con a.(punto) en su ID?

Question

Dadas las siguientes clases y el método de acción del controlador:

public School
{
  public Int32 ID { get; set; }
  publig String Name { get; set; }
  public Address Address { get; set; }
}

public class Address
{
  public string Street1 { get; set; }
  public string City { get; set; }
  public String ZipCode { get; set; }
  public String State { get; set; }
  public String Country { get; set; }
}

[Authorize(Roles = "SchoolEditor")]
[AcceptVerbs(HttpVerbs.Post)]
public SchoolResponse Edit(Int32 id, FormCollection form)
{
  School school = GetSchoolFromRepository(id);

  UpdateModel(school, form);

  return new SchoolResponse() { School = school };
}

Y la siguiente forma:

<form method="post">
  School: <%= Html.TextBox("Name") %><br />
  Street: <%= Html.TextBox("Address.Street") %><br />
  City:  <%= Html.TextBox("Address.City") %><br />
  Zip Code: <%= Html.TextBox("Address.ZipCode") %><br />
  Sate: <select id="Address.State"></select><br />
  Country: <select id="Address.Country"></select><br />
</form>

Puedo actualizar tanto la instancia de la escuela como el miembro de la dirección de la escuela. Esto es bastante bueno! ¡Gracias equipo ASP.NET MVC!

Sin embargo, ¿cómo uso jQuery para seleccionar la lista desplegable para que pueda precompletarla? Me doy cuenta de que podría hacer este lado del servidor, pero habrá otros elementos dinámicos en la página que afectarán a la lista.

Lo que sigue es lo que tengo hasta ahora, y no funciona, ya que los selectores no parecen coincidir con los ID:

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address.Country").fillSelect(data);
  });
  $("#Address.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address.State").fillSelect(data);
    });
  });
});

Answer 1

De Grupos de Google :

Use dos barras diagonales inversas antes de cada personaje especial.

Una barra invertida en un selector jQuery escapa al siguiente carácter. Pero necesita dos de ellos porque la barra diagonal inversa también es el carácter de escape para cadenas de JavaScript. La primera barra invertida escapa a la segunda, lo que le da una barra invertida real en la cadena, que luego escapa al siguiente carácter para jQuery.

Entonces, supongo que estás mirando

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address//.Country").fillSelect(data);
  });
  $("#Address//.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address//.State").fillSelect(data);
    });
  });
});

También consulte learn.jquery.com/using-jquery-core/faq/… en las preguntas frecuentes de jQuery.

Answer 2

El Release Candidate de ASP.NET MVC que se acaba de publicar solucionó este problema, ahora reemplaza los puntos con guiones bajos para el atributo de ID.

<%= Html.TextBox("Person.FirstName") %>

Renders a

<input type="text" name="Person.FirstName" id="Person_FirstName" />

Para más información, vea las notas de la versión, comenzando en la página 14.

Answer 3

Escapelo por Jquery:

function escapeSelector(s){
    return s.replace( /(:|/.|/[|/])/g, "//$1" );
}

ejemplo de uso:

e.find(''option[value=''+escapeSelector(val)+'']'')

más información here .

Answer 4

Esto está documentado en documentos jQuery Selectors :

Para usar cualquiera de los metacaracteres (como !"#$%&''()*+,./:;<=>?@[/]^`{|}~ ) Como parte literal de un nombre, debe ser escapado con dos barras diagonales inversas: // . Por ejemplo, un elemento con id="foo.bar" , puede usar el selector $("#foo//.bar") .

En resumen, prefijo el . con // siguiente manera:

$("#Address//.Country")

Por qué no trabajar en mi ID?

El problema es eso . tiene un significado especial, el siguiente de cadena se interpreta como un selector de clase. Entonces $(''#Address.Country'') coincidiría con <div id="Address" class="Country"> .

Cuando escapé como //. , el punto se tratará como texto normal sin ningún significado especial, que coincida con la ID que desea <div id="Address.Country"> .

¡Esto se aplica a todos los personajes !"#$%&''()*+,./:;<=>?@[/]^`{|}~ Que de otro modo tendría un significado especial como selector en jQuery. Solo preceder // para tratarlos como texto normal.

¿Por qué 2 // ?

Como se señala en la respuesta de bdukes, hay una razón por la que necesitamos 2 / caracteres. / escapará del siguiente carácter en JavaScript. Se cuando JavaScript interpreta la cadena "#Address/.Country" , verá / , interpretar que significa tomar literalmente el siguiente carácter y eliminarlo cuando la cadena se pasa como argumento a $() . Eso significa que jQuery seguirá viendo la cadena como "#Address.Country" .

Ahí es donde entra el segundo / para jugar. El primero le dice a JavaScript que interprete el segundo como un carácter literal (no especial). Esto significa que el segundo será visto por jQuery y comprenderá lo siguiente . el personaje es un personaje literal

¡Uf! Quizás podamos visualizar eso.

//    Javascript, the following / is not special.
//         | 
//         |
//         v    
$("#Address//.Country");
//          ^ 
//          |
//          |
//      jQuery, the following . is not special.

Answer 5

No puede usar un selector de id jQuery si el id contiene espacios. Use un selector de atributos:

$(''[id=foo bar]'').show();

Si es posible, especifique también el tipo de elemento:

$(''div[id=foo bar]'').show();

Answer 6

Resolví el problema con la solución dada por jquery docs

Mi función:

//funcion to replace special chars in ID of  HTML tag

function jq(myid){


//return "#" + myid.replace( /(:|/.|/[|/]|,)/g, "//$1" );
return myid.replace( /(:|/.|/[|/]|,)/g, "//$1" );


}

Nota: elimino el "#" porque en mi código concatono el ID con otro texto

Fuente: here

Answer 7

Solo información adicional: compruebe este ASP.NET MVC issue # 2403 .

Hasta que se solucione el problema, uso mis propios métodos de extensión como Html.TextBoxFixed, etc. que simplemente reemplaza los puntos con guiones bajos en el atributo id (no en el atributo de nombre), para que use jquery como $ ("# Address_Street") pero en el servidor, es como Address.Street.

El código de muestra sigue:

public static string TextBoxFixed(this HtmlHelper html, string name, string value)
{
    return html.TextBox(name, value, GetIdAttributeObject(name));
}

public static string TextBoxFixed(this HtmlHelper html, string name, string value, object htmlAttributes)
{
    return html.TextBox(name, value, GetIdAttributeObject(name, htmlAttributes));
}

private static IDictionary<string, object> GetIdAttributeObject(string name)
{
    Dictionary<string, object> list = new Dictionary<string, object>(1);
    list["id"] = name.Replace(''.'', ''_'');
    return list;
}

private static IDictionary<string, object> GetIdAttributeObject(string name, object baseObject)
{
    Dictionary<string, object> list = new Dictionary<string, object>();
    list.LoadFrom(baseObject);
    list["id"] = name.Replace(''.'', ''_'');
    return list;
}

Answer 8

Usando dos barras diagonales está bien, es trabajo. Pero si usa un nombre dinámico, es decir, un nombre de variable, deberá reemplazar los caracteres.

Si no desea cambiar los nombres de sus variables, puede hacer esto:

var variable="namewith.andother";    
var jqueryObj = $(document.getElementById(variable));

y que tienes tu objeto jquery