problema tabla con select dinámico jquery

[yngwiejm]

Hola. Tengo un problema para crear un select html dinámico dentro de la celda de una tabla. Esto me funciona bien hasta aquí, pero al momento de hacer click sobre el select me muestra las opciones pero no me deja seleccionar una, ya que se cierra.
Tratando de evitar esto le agregué a la celda la clase prioridad, para que funcione al hacer click sobre la celda que tenga esta clase, y luego le quite la clase para que no vuelva a crear el select, pero no me funciona.

Gracias para quien me pueda ayudar.

Código:

<script type='"text/javascript' >
    echo'
        $(document).ready(function(){
        $("td.prioridad").click(function(event){
           
             $(this).removeClass("prioridad");
            
              var fila = $(this).attr("id").split("_");
              var select = "";
              
              
                  select = select + "<select id='s_"+fila[1]+"' style='width: 100%;'>";
                  select = select +"<option value='uno'>1</option>";
                  select = select +"<option value='dos'>2</option>";
                  select = select +"</select>";
                  $(this).html(select);
              
              });
              });
</script>

y el html de la celda que es impreso con echo de PHP segun informacion de base de datos:

Código:

echo"<td class='prioridad' id='c_".$datos['id']."_".$datos['prioridad']."'>" .$datos['prioridad']. "</td>";

[djaevi]

te recomendaria que hagas un append de un tipo de elemento select de html con jquery en lugar de concatenarlo en una cadena y hacer un inner html.

Código Javascript:

$(document).ready(function(){
    
    $("td.prioridad").click(function(event){
           
    $(this).removeClass("prioridad");
    
    var fila = $(this).attr("id").split("_");
    
    $(this)
        .append(
            $("<select></select>")
                .append(
                    $("<option></option>")
                        .val(1)
                        .text(1)
                )
                .append(
                    $("<option></option>")
                        .val(2)
                        .text(2)
                )
        )            
    });
});
 

[yngwiejm]

Gracias, djaevi, por tu respuesta, pero no me funcionó como espero que lo haga, ya que al hacer el segundo click, para elegir una opción del select, me agrega otro select cada vez que hago click. Al parecer lo de quitarle la clase prioridad a la celda es el problema, porque sigue ejecutando la función aunque ya no coincida con con el selector $("td.prioridad").

[djaevi]

En ese caso agrega al final de la funcion esto:

$(this).unbind("click"); eso deberia remover la funcion click de la celda una vez q ya tengas creado el select.

Saludos