We Keep Coding

jQuery click event on dynamically generated elements for calendar?

The answer to the following question,
var counter = 0;
$("button").click(function() {
$("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});
$("h2").on("click", "p.test", function(){
alert($(this).text());
});
I have a dynamically generated calendar that when you click on an individual day, instead of opening a new web page, it swaps the calendar for the events of the day. The events are listed in a table and I want to be able to click on a row and and have it trigger a function which uses location.assign(). So each row looks like the following,
<tr id="message-7">
New page in calendar loads and creates,
<tr id="message-132">
Clicking does not trigger the function. In the example from the other question, it accesses the text of the element in order to make the element unique as opposed to giving the element a unique id # as in my situation.
Am I approaching the problem the wrong way? Could I add something like a "title=132" tag that I could reference?

Ideally try not to make too much meaning out of the ID. Instead use data as shown here.
So instead of
<tr id="message-7">
use
<tr id="1234567" data-message="7">
Then in code you can address the data as:
var messageVal = $("#1234567").data("message")
And if you need to add a generic click event then you might want to use a dummy css class assignment for all appropriate TR's:
<tr id="1234567" data-message="7" class="messageRow">
so that you can write
$(".messageRow").on("click", function(event){
event.preventDefault()
var messageVal = $(this).data("message")
This is useful in the case where only some TR's will contain clickable content - just don't assign the class to the others.

How to make some text content in a div editable on click?

I want a editbox editable when we click on div as we accomplish this by clicking on "Div editable".It work great for single id Can you please tell how to make it for multiple id's.Thanks in advance.
<table>
<tr>
<td>
Editable Div (double click text to the right, to enter edit mode) :
</td>
<td>
<div id="makeEditable">Div editable</div>
</td>
</tr>
</table>
(function($) {
$.fn.editable = function() {
var textBlock = $(this);
// Create a new input to allow editing text on double click
var textBox = $('<input/>');
textBox.hide().insertAfter(textBlock).val(textBlock.html());
// Hiding the div and showing a input to allow editing the value.
textBlock.dblclick(function() {
toggleVisiblity(true);
});
// Hiding the input and showing the original div
textBox.blur(function() {
toggleVisiblity(false);
});
toggleVisiblity = function(editMode) {
if (editMode == true) {
textBlock.hide();
textBox.show().focus();
// workaround, to move the cursor at the end in input box.
textBox[0].value = textBox[0].value;
}
else {
textBlock.show();
textBox.hide();
textBlock.html(textBox.val());
}
};
};
})(jQuery);
$(function() {
var $edit = $('#makeEditable').editable();
});

You could simplify things a bit by using contenteditable="true"
Working Example
Basic functionality
<div id="makeEditable" contenteditable="true">Div editable</div>
Optionally add some css to make it a little more user friendly
#makeEditable:focus{
box-shadow: 0 0 2px blue;
}
MDN Documentation for Content Editable

You should rework your logic a little. You should create separate input for every div element and in the events you should operate over current dblclicked or blured element through this. Here is JSFiddle demo with little modifications.
Hope it helps you. But I recommend to use contenteditable attribute as #apaul34208 suggested unless you have other custom js logic.

Just use basic jQuery selectors like this:
$('#makeEditable,#anotherid,#anidagain')
But if you want to do it on multiple divs/elements its better to give all the elements a class, and apply the function to all the elements with that class. Your selector will then be:
$('.editable')

Get td value from specific tr (with mouse hover)

My problem is js sortable table that I also using mouse hover for it.
The problem is when I resort my table the hover url is not updating and I looking for how I can get for specific tr I selected the value of first td.
I tried with different variations such as:
$this.find('td:eq(0)')
or with
getElementById("trselect")
nothing works.
I use it with both mouse hover and probably looking for something like:
document.location.href = "details/" + $('tr').find('td:first-child').text();

Pure JavaScript Solution
There are a bunch of jQuery answers but no jQuery tag so I'm offering a pure JavaScript solution for you. Installing a large library for this simple task seems pointless.
You can assign the row to a Javascript variable like this, and look for mouseover.
To get the first TD's content, you can use a function like this:
function getFirstTdContent(row) {
elem = row.children[0];
alert(elem.textContent); // Do whatever you want to do with the content here
}
To call it, declare your row like this:
<tr onmouseover='getFirstTdContent(this);'>
<td>This should be returned</td>
<td>This should not be returned</td>
</tr>

Try something like this with jQuery:
Add jQuery library:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Add jQuery code to get value of first TD:
<script>
$(document).ready(function(){
$('tr').mouseover(function(){
var valueOfTd = $(this).find('td:first-child').text();
alert(valueOfTd); // Do here what you want with the value.
document.location.href = 'http://www.google.com/'+ valueOfTd;
});
});
</script>

Looks like you're using jQuery...
Try this:
http://jsfiddle.net/cF63Q/
$(function(){
$('#myTable tr').hover(function(){
console.log($(this).find('td').first().html());
});
});

Make one div containing a table into two divs containing tables

I have a function that gets raw HTML to output to a table, but I want to take out the first three columns and put them in another div.
I am considering making a div on the page that is hidden, setting this div's html to the raw HTML I get, and then using the selector syntax to strip it into each table's div. Is there a way to do this without the intermediate faux-div to hold the raw HTML?

It all depends out what the "function that gets raw HTML" does. Where is it getting the HTML? If it's in some kind of format other than a rendered node, then you should be able to manipulate it as needed prior to rendering it. If you've got it in a string format (and the markup is valid) jQuery is really good at turning strings into traversible objects. For example:
var xml = '<div><span>hello</span></div>';
console.log($(xml).find('span'));
In FireBug, this displays the span as an object node.

I'm not sure exactly why you'd want to do this, rather than arrange your data server-side, but one approach that works is:
$(document).ready(
function(){
$('table').click(
function(){
$('<table />').appendTo('#newTable').addClass('new');
$('table').eq(0).find('tr td:first-child').each(
function(){
$(this).appendTo('.new').wrap('<tr></tr>');
});
});
});
With the (x)html:
<table>
<tr>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>2:1</td>
<td>2:2</td>
<td>2:3</td>
</tr>
<tr>
<td>3:1</td>
<td>3:2</td>
<td>3:3</td>
</tr>
<tr>
<td>4:1</td>
<td>4:2</td>
<td>4:3</td>
</tr>
</table>
<div id="newTable"></div>
JS Fiddle demo
The demo uses jQuery's click() event, but that's just to show it working interactively; it could certainly be placed straight into the DOM-ready/$(document).ready(function(){/* ... */}); event.
The above code would allow repeated clicks (each time moving the first 'column' into a new table), the edit removes that possibility using jQuery's one(), giving the following jQuery:
$(document).ready(
function(){
$('table').one('click',
function(){
$('<table />').appendTo('#newTable').addClass('new');
$('table').eq(0).find('tr td:first-child').each(
function(){
$(this).appendTo('.new').wrap('<tr></tr>');
});
});
});
JS Fiddle demo, featuring one().

jQuery - Find the next element which has a specific child

Lets say I have something like this:
<tr>
<td><input type="text" /></td>
<td>Somevalue</td>
<td><intput type="text /></td>
</tr>
I am in the event handler for a keypress in the first text box. I want to find the next td which has a text box in it if it exists using jQuery.

Something like this should work (assuming this is the input).
var next = $(this).parent().next("td > input[type='text']");

tj111's answer does not work for me.
May be that is because of newer version of jQuery. I came up with this:
var next = $(this).parent().nextAll().has("input[type='text']").first();

I don't know what is your selector, but if you need to select all inputs (type text). You can try this.
$(function(){
$(':input').each(function(){
$(this).keypress(function(){
$(this).next('input[type=text]').val('I\'m the next');
}) // end of keypress
}) // enf of each
}) // End of function
So, do not matter where you put more inputs, you can always take them.